Как сделать в html кнопку на Ютуб

Чтобы получить готовый css код кнопки нажми на нее и скопируй.

Скопировать код кнопок css

Все параметры кнопки

Размер кнопки
Размер шрифта
Закруглить края кнопки
Верхний цвет градиента кнопки
Нижний цвет градиента кнопки
Полоса сверху кнопки
Цвет кнопки при наведении
Цвет текста
Цвет текста после наведения

Цвет кнопки при нажатии

Выбери шрифт у кнопки

Как сделать кнопку в генераторе css

Чтобы сделать красивую кнопку css воспользуемся генератором. У кнопки есть параметры.

• Размер кнопки css. Изменяем форму кнопки высоту и ширину кнопки.
• Размер текста у кнопки. Задается свойством font-size.
• Закругление краев. Если нужна круглая кнопка используем свойство border-radius: 50%.

Зададим все цвета кнопки css.

1. Верхний цвет градиента. Установим цвет в позиции top.
2. Нижний цвет градиента. Задаем в позиции bottom.
3. Полоса сверху кнопки. Дополнительная функция украшения.
4. Цвет при наведении. Используем класс hover.
5. Цвет текста. Подбираем цвет контрастный цвету кнопки.
6. Цвет текста кнопки после наведения. Если изменим фон со светлого на темный, то и цвет должен стать другим.
7. Цвет кнопки при нажатии. Установим третий цвет для класса active.

После установки всех параметров наживаем на скопировать код кнопки css и переносим в проект. В файле индекса зададим html код для кнопки с классом button. Теперь можно с генерировать тень box shadow и добавить ее при наведении на кнопку, получится красивый эффект.

HTML5 #8 Ссылки и кнопки (Links & Buttons)

оформление кнопок css

Чтобы сделать красивую html кнопку воспользуемся псевдоклассами.

1. :hover навели курсор мышки на кнопку и она изменила цвет текста и фона.

• Чтобы сделать кнопку по центру используем свойство margin: 0 auto. Подробно о позиционирование элементов написано тут.
• Можно сделать красивую кнопку с анимацией, читать тут.
• Как сделать каркас для кнопки в html можно прочитать тут.

Примеры красивых кнопок css

Рассмотрим стили css у 12 разных видов кнопок.

Прозрачная кнопка css

Оформить Прозрачная кнопка

button.button11 color:#fff; line-height: 32px; border: 0px; text-align: center; width: 100px; border-radius:16px; background:transparent; background-image: -webkit-linear-gradient(#127009, #3b9932, #409e37); background-image: -moz-linear-gradient(#127009, #3b9932, #409e37); background-image: -o-linear-gradient(#127009, #3b9932, #409e37); -moz-box-shadow: inset 0 0 7px rgba(0,0,0,0.5); -webkit-box-shadow: inset 0 0 7px rgba(0,0,0,0.5); -o-box-shadow: inset 0 0 7px rgba(0,0,0,0.5); box-shadow: inset 0 0 7px rgba(0,0,0,0.5); display: block; text-decoration: none; font-size: 14px; padding: 0px; > button.button1:before

Ку Вторая прозрачная кнопка

Как сделать кнопку в html | Уроки HTML, CSS

button.button2 < color:#fff; line-height: 48px; border: 0px; text-align: center; width: 48px; border-radius:24px; background:transparent; background-image:-moz-radial-gradient(center bottom, circle cover, rgba(16, 236, 236, 1) 20%, rgba(0, 44, 228, 1) 80%); background-image:-webkit-radial-gradient(center bottom, circle cover, rgba(16, 236, 236, 1) 20%, rgba(0, 44, 228, 1) 80%); background-image:-o-radial-gradient(center bottom, circle cover, rgba(16, 236, 236, 1) 20%, rgba(0, 44, 228, 1) 80%); display: block; padding: 0px; text-decoration: none; >button.button2:before < content: «.»; color:transparent; line-height: 24px; width: 40px; margin-left: 4px; margin-bottom: -24px; background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) ); background-image:-moz-linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0)); background-image: -o-linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0)); border-radius:24px; display:block; >>

Заказать Кнопка с деформацией

button.button3 < border-radius: 10px; border: none; padding: 10px 10px 14px 10px; color: #111; border-radius: 10px; font-size: 1.2em; font-weight: 200; transition: all 0.2s; margin: 5px; border-bottom: 0px solid #eee; cursor:pointer; >button.button3:active < transform: scaleX(0.9) translateY(4px); >button.button3.green < background: #82CA9D; >button:not(:active)

Заказать Стиль кнопки с изменением положения

button.button4 < text-decoration: none; outline: none; display: inline-block; width: 140px; height: 45px; line-height: 45px; border-radius: 45px; margin: 10px 20px; font-size: 11px; text-transform: uppercase; text-align: center; letter-spacing: 3px; font-weight: 600; color: #524f4e; background: white; box-shadow: 0 8px 15px rgba(0,0,0,.1); transition: .3s; >button.button4:hover

Заказать Стиль с бликом

button.button5 < text-decoration: none; outline: none; display: inline-block; padding: 12px 40px; margin: 10px 20px; border-radius: 30px; background-image: linear-gradient(45deg, #6ab1d7 0%, #33d9de 50%, #002878 100%); background-position: 100% 0; background-size: 200% 200%; font-size: 24px; font-weight: 300; color: white; box-shadow: 0 16px 32px 0 rgba(0,40,120,.35); transition: .5s; >button.button5:hover

Заказать Кнопка с цветовой полосой

button.button6 < text-decoration: none; outline: none; display: inline-block; margin: 10px; color: white; box-shadow: 0 0 0 2px white; padding: 20px 0; width: 150px; text-align: center; text-transform: uppercase; letter-spacing: 3px; position: relative; overflow: hidden; >span < position: relative; z-index: 5; >button.button6:before, button.button6:after < content: «»; position: absolute; top: 0; bottom: 0; right: 0; left: 0; >button.button6:before < transform: translateX(-100%); background: white; transition: transform .3s cubic-bezier(.55,.055,.675,.19); >button.button6:after < background: #413ad5; transform: translateX(100%); transition: transform .3s cubic-bezier(.16,.73,.58,.62) .3s; >button.button6:hover:before, button.button6:hover:after

Заказать Кнопка с объемным цветом

button.button7 < text-decoration: none; outline: none; display: inline-block; padding: 15px 30px; margin: 10px 20px; border-radius: 10px; box-shadow: 0 0 40px 40px #F137A6 inset, 0 0 0 0 #F137A6; font-weight: bold; letter-spacing: 2px; color: white; transition: .15s ease-in-out; >button.button7:hover

Заказать Кнопка с бликом

button.button8 < text-decoration: none; outline: none; display: inline-block; padding: 10px 30px; margin: 10px 20px; position: relative; overflow: hidden; border: 2px solid #fe6637; border-radius: 8px; color: #fe6637; transition: .2s ease-in-out; >button.button8:before < content: «»; background: linear-gradient(90deg, rgba(255,255,255,.1), rgba(255,255,255,.5)); height: 50px; width: 50px; position: absolute; top: -8px; left: -75px; transform: skewX(-45deg); >button.button8:hover < background: #fe6637; color: #fff; >button.button8:hover:before

Стеклянная кнопка

Заказать Стиль стеклянной кнопки

button.button9 < position: relative; display: inline-block; color: #777674; font-weight: bold; text-decoration: none; text-shadow: rgba(255,255,255,.5) 1px 1px, rgba(100,100,100,.3) 3px 7px 3px; user-select: none; padding: 1em 2em; outline: none; border-radius: 3px / 100%; background-image: linear-gradient(45deg, rgba(255,255,255,.0) 30%, rgba(255,255,255,.8), rgba(255,255,255,.0) 70%), linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 90%, rgba(255,255,255,.3)), linear-gradient(to right, rgba(125,125,125,1), rgba(255,255,255,.9) 45%, rgba(125,125,125,.5)), linear-gradient(to right, rgba(125,125,125,1), rgba(255,255,255,.9) 45%, rgba(125,125,125,.5)), linear-gradient(to right, rgba(223,190,170,1), rgba(255,255,255,.9) 45%, rgba(223,190,170,.5)), linear-gradient(to right, rgba(223,190,170,1), rgba(255,255,255,.9) 45%, rgba(223,190,170,.5)); background-repeat: no-repeat; background-size: 200% 100%, auto, 100% 2px, 100% 2px, 100% 1px, 100% 1px; background-position: 200% 0, 0 0, 0 0, 0 100%, 0 4px, 0 calc(100% — 4px); box-shadow: rgba(0,0,0,.5) 3px 10px 10px -10px; >button.button9:hover < transition: .5s linear; background-position: -200% 0, 0 0, 0 0, 0 100%, 0 4px, 0 calc(100% — 4px); >button.button9:active

3d кнопка css

Заказать Стиль 3d кнопки

button.button10 < position: relative; display: inline-block; font-weight: bold; color: #000; text-decoration: none; text-shadow: -2px 2px rgba(255,255,255,.3); line-height: 1.1; padding: .5em 3em .5em .6em; background: linear-gradient(#ecc92b, #fce25b); box-shadow: 0 0 0 1px #fce25b inset, -1px 0px rgb(220,195,35), -1px 1px rgb(192,167,7), -2px 1px rgb(219,194,34), -2px 2px rgb(191,166,6), -3px 2px rgb(218,193,33), -3px 3px rgb(190,165,5), -4px 3px rgb(217,192,32), -4px 4px rgb(189,164,4), -5px 4px rgb(216,191,31), -5px 5px rgb(188,163,3), -6px 5px rgb(215,190,30), -6px 6px rgb(187,162,2), -7px 6px rgb(214,189,29), -7px 7px rgb(186,161,1), -8px 7px rgb(213,188,28), -8px 8px rgb(185,160,0), -7px 9px 1px rgba(0,0,0,.4), -5px 11px 1px rgba(0,0,0,.2), -1px 13px 4px rgba(0,0,0,.2), 4px 16px 7px rgba(0,0,0,.3); transition: .4s; >button.button10:active < box-shadow: none; -webkit-transform: translate(-7px, 8px); transform: translate(-7px, 8px); >button.button10:after < content: «»; position: absolute; top: calc(50% — .6em/2); right: .6em; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); border: .37em solid; border-top: none; border-left: none; width: .6em; height: .6em; box-shadow: inset -2px 2px rgba(255,255,255,.3); >button.button10:active

Выпадающая кнопка css

Цена 5 р. Код для выпадающей кнопки css

button.button11 < color: #FFFFFF; text-decoration: none; >button.button11 < background:#80a9da; background:-webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1)); background:-webkit-linear-gradient(top, #80a9da 0%, #6f97c5 100%); background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%); background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%); background:linear-gradient(top, #80a9da 0%, #6f97c5 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr=’#80a9da’, endColorstr=’#6f97c5′,GradientType=0 ); padding-left:20px; padding-right:80px; height:38px; display:block; margin: 20px auto; text-align:center; width:200px; position:relative; border:1px solid #5d81ab; -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5); -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5); box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5); -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; overflow:hidden; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; transition:all 0.3s linear; >.a-btn-3-text < padding-top:5px; display:block; width:0px; font-size:18px; white-space:nowrap; text-shadow:0px 1px 1px rgba(255,255,255,0.3); color:#446388; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; >.a-btn-3-slide-text < position:absolute; height:100%; top:0px; right:52px; width:0px; background:#63707e; text-shadow:0px -1px 1px #363f49; color:#fff; font-size:18px; white-space:nowrap; text-transform:uppercase; text-align:left; text-indent:10px; overflow:hidden; line-height:38px; -webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; -webkit-transition:width 0.3s linear; -moz-transition:width 0.3s linear; -o-transition:width 0.3s linear; transition:width 0.3s linear; >.a-btn-3-icon-right < position:absolute; right:0px; top:0px; height:100%; width:52px; border-left:1px solid #5d81ab; -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset; -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset; box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset; >.a-btn-3-icon-right span < width:38px; height:38px; opacity:0.7; position:absolute; left:50%; top:50%; margin:-20px 0px 0px -20px; background:transparent url(images/arrow_right.png) no-repeat 50% 55%; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; transition:all 0.3s linear; >.button11:hover < padding-right:140px; -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); >.button11:hover .a-btn-3-text < text-shadow:0px 1px 1px #5d81ab; color:#fff; >.button11:hover .a-btn-3-slide-text < width:57px; >.button11:hover .a-btn-3-icon-right span < opacity:1; >.button11:active

Пульсирующая кнопка css

Заказать Стиль в css для пульсирующей кнопки

Источник: sdelatlending.ru

Как сделать в html кнопку на ютуб

Тег чтобы добавить на страницу кнопку.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

1. Кратко
2. Пример
3. Как понять
4. Как пишется
5. Атрибуты
6. Подсказки
7. На практике

1. Дока Дог советует
2. Алёна Батицкая советует

1. Какая разница между ссылками и кнопками? В каких случаях надо использовать ссылку, в каких кнопку? Почему эта разница важна с точки зрения доступности?

Контрибьюторы:

Обновлено 13 сентября 2021

Кратко

Скопировать ссылку «Кратко» Скопировано

создаёт кликабельную кнопку.

Пример

Скопировать ссылку «Пример» Скопировано

Нажми меня button name=»button»>Нажми меняbutton> Скопировать Скопировано Не удалось скопировать

Как понять

Скопировать ссылку «Как понять» Скопировано

С помощью CSS можно настроить внешний вид кнопки и текста на ней: шрифт, размер, цвет фона и другие параметры. А если ничего не менять, то будет выглядеть, как стандартная браузерная кнопка.

На кнопку можно поместить любой HTML-элемент.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

. form> button>. button> form> Скопировать Скопировано Не удалось скопировать

Атрибуты

Скопировать ссылку «Атрибуты» Скопировано

К тегу можно применить любой универсальный атрибут, а также специфические атрибуты кнопок:

• autofocus — делает так, чтобы при загрузке страницы кнопка уже была выбрана и подсвечена, так что её можно нажать с клавиатуры клавишей Enter.
• disabled — делает кнопку неактивной: нажать на неё нельзя, по дефолту отображается серым цветом.
• form — связывает кнопку с любой формой в документе через ID. Если ID не указан, то с предшествующей формой.
• formaction — задаёт URL-адрес, на который отправляются данные после нажатия на кнопку.
• formenctype — определяет формат файла, который пользователь может отправить при нажатии на кнопку. У него есть три значения:

• application / x — www — form — urlencoded : стандартное значение, вместо пробелов ставится +, а символы, вроде русских букв, кодируются их шестнадцатеричными значениями (например, %D0%9F%D0%B5%D1%82%D1%8F вместо Петя );
• multipart / form — data — используется, чтобы отправлять файлы, данные при этом не кодируются;
• text / plain — буквы и другие символы не кодируются, вместо пробелов появляется +.

• post — упаковывает данные формы в тело сообщения и передаёт их на сервер, объём данных зависит от настроек сервера;
• get — добавляет данные из формы прямо в URL-адрес после знака «?», например https : / / site . ru / doc / ? name = Ivan», а объём данных не может превышать 4 Кб. Если добавить этот атрибут в кнопку, он переопределит атрибут method у всей формы.

• _self : показывает данные в текущем окне. Это значение используется по умолчанию.
• _blank : показывает данные в новом окне браузера — его используют чаще всего.
• _parent : показывает данные внутри родительского элемента фрейма, а если такого нет, то загружает в текущем окне.
• _top : отменяет все родительские фреймы и загружает страницу в полном окне браузера. Если родительских фреймов нет, то показывает данные в текущем окне.

• submit : отправляет данные на сервер. Это также значение по умолчанию.
• reset : удаляет введённые данные из формы.
• button : просто кнопка. Действие для неё можно задать через скрипты.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

Если хочется, чтобы пользователь отправил данные вам на сервер по нажатию кнопки, то либо должен быть внутри контейнера , либо связан с формой при помощи атрибутов id и form :

Введите ваш email Отправить form id=»login»> label> Введите ваш email input type=»email» placeholder=»Ваш email»> label> form> button type=»submit» form=»login»>Отправитьbutton> Скопировать Скопировано Не удалось скопировать

Тег с атрибутом type = «button | reset | submit» тоже создаёт кнопку, но проще стилизовать, так как внутрь можно добавить любой HTML-контент, например, , или .

Если создаёте кнопку, которая не отправляет ничего на сервер, убедитесь, что задан атрибут type , иначе может вылезти ошибка.

На практике

Скопировать ссылку «На практике» Скопировано

Дока Дог советует

Скопировать ссылку «Дока Дог советует» Скопировано

Но есть и другое мнение. Я вот использую крайне редко. Допустим, вам нужно отправить данные формы на сервер. Если нужна обычная квадратная кнопка с надписью «Отправить», то я ставлю , потому что проще верстать ‍♂️

Единственный случай, когда я использую — это когда нужно отправить данные из формы на сервер, но кнопка нужна посложнее: с картинкой, заливкой или особым шрифтом, например. В обычный картинку не вставить. А с тегом не хочется извращаться, потому что он по умолчанию не отправляет данные формы.

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

При выборе между кнопкой и ссылкой нужно смотреть исключительно на семантику, а не на внешний вид элемента в дизайне и уж точно не на простоту вёрстки.

В первую очередь вы должны понять, за что отвечает элемент: за перенаправление на другую страницу, раздел сайта, ресурс или выполняет какие-то действия на самой странице (например, отправляет данные формы).

Если мы по клику на элемент открываем новое окно или перенаправляем пользователя на другую страницу — выбираем тег , ссылку.

Если мы никуда пользователя не отправляем, а, например, открываем диалоговое окно или листаем слайдер, то это кнопки.

Вадим Макеев в своём докладе «Жми сюда!» сформулировал следующий способ выбора между кнопкой и ссылкой:

• В любой ситуации, где вам нужно выбирать, кнопка это или ссылка, выберите кнопку ( ).
• Если вы можете дать какой-то адрес для перенаправления — тогда это ссылка ( ).
• Всегда начинайте с кнопки.

+ Развернуть

На собеседовании

Скопировать ссылку «На собеседовании» Скопировано

Какая разница между ссылками и кнопками? В каких случаях надо использовать ссылку, в каких кнопку? Почему эта разница важна с точки зрения доступности?

Скопировать ссылку «Какая разница между ссылками и кнопками? В каких случаях надо использовать ссылку, в каких кнопку? Почему эта разница важна с точки зрения доступности?» Скопировано

Скопировать ссылку «Александр Ламков отвечает» Скопировано

Ощутимая разница между ссылками и кнопками в том, что «активация» элемента при фокусе с клавиатуры происходит по-разному. Для ссылок — клавишей Enter , а для кнопок — пробелом или Enter . Пользователь, привыкший перемещаться по интерфейсу сайта и взаимодействовать с ним с клавиатуры, получит неожиданное поведение при попытке взаимодействия с ложной ссылкой или кнопкой.

Чтобы определить, какой тег использовать, ссылку или кнопку, нужно подумать про ожидаемое поведение при взаимодействии с элементом. Если при нажатии на элемент подразумевается переход на другую страницу, то в коде элемент нужно сделать тегом , то есть ссылкой. Если при нажатии произойдёт действие в рамках текущей страницы, например, откроется модальное окно с формой входа, то такой элемент нужно сделать тегом .

С точки зрения доступности у ссылок и кнопок разные роли. У ссылок — link , у кнопок — button . Скринридер перед озвучиванием содержимого элемента произносит его роль. Если используете неправильные теги, роли перемешаются и это запутает пользователей скринридеров.

Источник: doka.guide

Как сделать кнопку ссылкой

Оформлять ссылку как стандартную кнопку нежелательно: ссылка по определению указывает на ресурс, а нажатие кнопки обычно инициирует действие. Но если задача возникла, имеет смысл хотя бы решать её правильно.

Правильно

Синтаксически корректное («валидное») и кроссбраузерное решение — заключить кнопку в простейшую форму. В атрибут action формы следует поместить URL-адрес, на который должна вести «кнопка-ссылка». Для работы формы в устаревших браузерах (IE8 и ниже) следует добавить кнопке атрибут type= «submit» :

«Кнопка-ссылка» в примере ведёт на страницу с адресом /example/ .

Если требуется открывать ссылку в новом окне или фрейме, можно, как и у обычных ссылок, использовать атрибут target элемента FORM :

Демо

Строка запроса

Строка запроса — часть URL-адреса после первого вопросительного знака, содержащая GET-параметры в виде пар name=value ( имя=значение ), разделённых символом lorem=ipsum .

Chromium/ Blink и WebKit

В браузерах на основе движков Chromium/ Blink (Chrome, Opera 15+, Яндекс.Браузер, Vivaldi) и WebKit (Safari) есть ошибка (баг) (1, 2): вопросительный знак, отделяющий строку запроса от основной части адреса, добавляется к адресу даже при отсутствии полей в форме. Поэтому, например, форма:

приведёт на адрес /example/? вместо ожидаемого /example/ .

Кент Тамура (Kent Tamura) из команды разработчиков Chromium говорит, что это соответствует текущим специфи­кациям HTML и URL.

Обойти это можно с помощью автоматического серверного перенаправления (редиректа) с адреса, оканчивающегося вопросительным знаком, на такой же адрес без воспросительного знака.

Ограничения по сравнению с реальной ссылкой

• У пользователя нет возможности узнать, куда ведёт ссылка-кнопка, до щелчка по ней.
• Пользователь не может по своему желанию открыть ссылку-кнопку в новой вкладке или в новом окне.

Неправильно

Кнопка внутри ссылки

Нередко элемент BUTTON просто помещают внутрь ссылки:

Это работает во всех современных браузерах, но согласно HTML5 это синтаксически некорректно («невалидно»): ссылка не должна содержать интерактивные элементы. Кроме того, такая ссылка не работает в Internet Explorer (IE) ниже 9-й версии.

Демо

Кнопка с JS-обработчиком щелчка

Порой используется кнопка с JavaScript-обработчиком события щелчка:

Но такая кнопка не работает при выключенном JavaScript, её невозможно открыть в новой вкладке или новом окне, и возможны проблемы с индексацией поисковиками, не исполняющими JavaScript-код.

Демо

Программа для масштабирования игр без размытия

Нестандартные расширения CSS

Описанные ниже возможности нестандартные, и использовать их не рекомендуется.

Firefox и Chromium

Firefox версий 81 и ниже и браузеры на основе движка Chromium (Chrome, Opera 15+, Vivaldi, Яндекс.Браузер) прошлых версий поддерживали нестандартные префиксированные варианты свойства appearance , значение button которых позволяло оформить как кнопку произвольный элемент, в том числе ссылку:

A.example -moz-appearance: button; /* Firefox */
-webkit-appearance: button; /* Chromium */
>

Демо

Internet Explorer, Edge и спецификация

В браузерах Microsoft — Internet Explorer (IE) и Edge — возможность недоступна. В спецификации CSS Basic User Interface Module Level 4 значение button свойства appearance не предусмотрено.

• morontt2013-03-08 Чего только не придумают… 🙂 Хотя вот ссылка кнопкой — это на каждом шагу буквально встречается.
• Александр 2013-06-30 Марат, очень помогла ваша статья. Огромное спасибо!
  Это самый грамотный и актуальный на сегодня ответ в интернете, который мне удалось найти.
  Продолжите, пожалуйста, тему — «Правильный способ сделать картинку ссылкой» (1 вариант — только HTML; 2 вариант — CSS; …). В сети масса устаревших и в корне неверных рекомендаций — кто на что горазд…
  И еще один вопрос-просьба. По адресу http://api.yandex.ru/share/ Яндекс раздает невалидный код. На недоуменные вопросы в клубе разработчиков (http://clubs.ya.ru/share/) отвечают: «А зачем вам эта валидность?» Не могли бы Вы исправить их код?
• Никита 2013-11-15 Есть и у этого способа подводные камни. Вот такие вот штуки ( http://s020.radikal.ru/i720/1311/34/bfe7beda17fe.jpg ) при использовании кнопок предыдущей и следующей страницы. Мешается ужасно. Как обойти непонятно.
• Marat Tanalin(автор)2013-11-16 Никита, если вы о подтверждении, запрашиваемом браузером при попытке обновить страницу (или вернуться на неё по браузерной истории), загруженную в результате отправки формы, то это имеет место только в отношении форм, отправляемых методом POST (когда данные отправляются отдельным HTTP-пакетом). В данной же заметке описывается отправка форм методом GET (когда данные передаются непосредственно в URL-адресе страницы-адресата в виде пар имя=значение , добавляемых после вопросительного знака к адресу, указанному в атрибуте action формы), и соответствующие страницы пользователь может беспрепятственно обновлять или возвращаться на них без каких-либо запросов на подтверждение от браузера.
• Наташа 2015-01-22 Спасибо большое за информацию. У меня есть один «дурацкий» вопрос :-). Почему при размещении 2 и более кнопок на одной странице (с разными url адресами) все они работают в одном направлении?
• Marat Tanalin(автор)2015-01-22 Наташа, скорее всего, в вашем HTML-коде есть ошибки (например, у первой из двух форм отсутствует закрывающий тег ). На всякий случай обратите внимание, что каждую кнопку-ссылку следует заключать в собственную форму, при этом формы не должны быть вложенными друг в друга. В общем случае при любых странных проблемах полезно проверять код HTML-страницы валидатором.
• Наташа 2015-01-22 Спасибо, мне следовало быть более внимательной. И за Валидатор отдельное спасибо )))
• thnx 2015-02-05 Весь интернет перерыл пока искал! спасибо мне очень помогло! и ошибок никаких нет в браузерах.
• ValeriusSoft 2015-05-27 Не работает на движок OpenCart 2.0.2 $uri = $_SERVER[‘REQUEST_URI’];
  $qPos = strpos($uri, ‘?’); if ($qPos === strlen($uri) — 1) header(‘HTTP/1.1 301 Moved Permanently’);
  header(‘Location: ‘ . substr($uri, 0, $qPos));
  >
  ?> Может у вас есть код для .htaccess ?
• Marat Tanalin(автор)2015-05-27 ValeriusSoft, см. новую заметку «Удаляем пустую строку запроса из URL».
• Den 2015-09-11 как привязать код возврата на предыдущую страницу
  к кнопке?
  код кнопки: назад

  За ранее спасибо.

• Marat Tanalin(автор)2015-09-11 Den, в вашем случае ссылка функционально не является ссылкой (указывает на фиктивный пустой якорь # и существует только для исполнения JS-кода при щелчке), поэтому можно просто заменить элемент A на элемент BUTTON , сохранив прежний onclick -обработчик. Но в общем случае использование JavaScript для реализации ссылки на предыдущую страницу нежелательно, т. к. :

• JS может быть выключен в браузере пользователя, и тогда такая ссылка работать не будет, запутывая пользователя;
• пользователь может попадать на одну и ту же страницу с разных страниц вашего сайта (тогда ссылка «Назад» будет всегда указывать на разные страницы), со страницы другого сайта (тогда предыдущий пункт в истории браузера будет указывать на страницу другого сайта — например, поисковика) или отсутствовать вообще (если страница открыта из закладок браузера, и тогда JS-ссылка «Назад» работать не будет).

При необходимости URL-адрес предыдущей страницы имеет смысл вставлять в ссылку явным образом на серверной стороне, а лучше — воздержаться от дублирования встроенной функциональности браузера.

не хотелось использовать javascript в кнопке

• Правильно

• Демо
• Строка запроса
• Chromium/Blink и WebKit
• Ограничения по сравнению с реальной ссылкой

• Кнопка внутри ссылки
• Кнопка с JS-обработчиком щелчка

• Firefox и Chromium
• Демо
• Internet Explorer, Edge и спецификация

• html,
• html5,
• snippets,
• web-стандарты,
• избранное,
• кроссбраузерность,
• ликбез,
• семантика,
• формы

• Firefox 114
• Firefox 113
• Firefox 112
• Firefox 111
• Firefox 110

• Как сделать кнопку ссылкой
• Правильный DOCTYPE в HTML5
• Сброс стилей в CSS
• Отключение Caps Lock в Windows
• Dell P2415Q. Авторский обзор 4K-монитора
• Asus PQ22UC — 22″ OLED-монитор 4K
• Dell UP3017Q — 30″ OLED-монитор 4K

Перепечатка любых материалов сайта в любом объёме запрещена

Источник: tanalin.com