Как сделать кнопку в css с ссылкой
Перейти к содержимому

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

  • автор:

Создаем динамические кнопочки-ссылки с помощью CSS

Особенность кнопки заключается в ее динамике, меняется ее графическое представление в разных состояниях:

  1. по умолчанию;
  2. при наведении курсора;
  3. при нажатии на кнопку.

Динамическая кнопка с двойным эффектом

Создадим кнопку на CSS, которая имеет только 2 состояния: «по умолчанию» и «при наведении курсора».

Наша кнопка основана на использовании тега a со вложенным в него тегом span , каждый из которых использует различные слои фонового изображения. Для получения возможности растяжки фона при увеличении размера кнопки по горизонтали задействуем так называемую технику «раздвижных дверей». Вот так выглядит кнопка-ссылка в части HTML-кода:

Как видите, код максимально прост. Далее нам нужно создать изображения кнопки в обоих состояниях. Для этого я воспользовался программой «Crystal Button». Вот что у меня получилось:

Дефолтная При наведении мыши

Оба состояния кнопки мы поместим в одно изображение (для каждого из тегов a и span ) и для смены с нормального состояния в «hover» будем смещать фоновое изображение по вертикали, CSS легко нам в этом поможет (о плюсах совмещения изображений в одно рассказано в статье «Оптимизация: используем одно изображение вместо двух»). Часть изображения, которая будет растягиваться в зависимости от текста, сделаем, к примеру, длиной в 350 пикселей (в зависимости от предполагаемой длины кнопок можно подобрать необходимую длину этой части). Высота нашей кнопки составляет 33 пикселя.

Для получения нужного эффекта раньше я прибегал к помощи JavaScript, CSS при этом вообще не использовался. HTML-код был следующим:

Соответственно, если у посетителя сайта отключен JavaScript, никакого эффекта наших красивых динамических кнопок он не увидит. Каскадные таблицы стилей помогут нам избавиться от этого недостатка.

Попробуем сделать точно такую же кнопку, используя CSS вместо JavaScript.

Код, которым оформим кнопочки «по умолчанию»:

a.button < display: block; float: left; /* чтобы кнопка не растягивалась на всю ширину родительского блока, а ограничивалась текстом */ font: bold 12px arial, sans-serif; color: #555; text-decoration: none; background: url(button_r.gif) top right no-repeat; padding-right: 25px; /* отступ для "раздвижных дверей" */ outline: none; /* убираем точечную обводку в FireFox, которая появляется при клике */ >a.button span

Необходимо учитывать, что высота строки и вертикальные отступы, заданные для span , в сумме должны с точностью равняться высоте изображения (в нашем примере — 33px). Если бы изображение не имело тени, то можно было бы просто указать высоту строки, равной 33px, тогда текст сразу поместился бы вертикально посередине.

Сейчас добавим эффект, который появляется при наведении курса мыши на кнопку:

a.button:hover < background-position: 100% -33px; >a.button:hover span

Готово! Вот что у нас получилось.

Динамическая кнопка с тройным эффектом

Мы пойдем еще дальше и добавим для нашей кнопки-ссылки еще один эффект, который проявляется при нажатии на кнопку. Соответственно для наших изображений мы добавляем еще одно состояние.

Осталось дописать чуток CSS для третьего состояния кнопки-ссылки:

a.button:active, a.button:focus < background-position: 100% -66px; >a.button:active span, a.button:focus span < background-position: 0% -66px; color: #222; padding: 8px 0 12px 23px; /* опускаем текст на 1px */ >

Готово! Можно кликать!

Получается вполне симпатично, не правда ли? 🙂

По желанию, для всех трех состояний кнопки можно установить фоновый цвет, на случай, если в браузере пользователя отключен показ изображений. В таком случае достаточно классам a.button , a.button:hover и a.button:active добавить свойство background-color .

Исправляем баг

В браузерах Opera и Internet Explorer наблюдается следующий баг — в них всякий раз, когда кнопка «отпущена», она не возвращается в состояние по умолчанию. Кстати, в ранних версиях Оперы такого бага не наблюдалось. Чтобы устранить эту неприятность, для тега а приходится использовать небольшой код JavaScript. Таким образом html-код кнопки будет выглядеть следующим образом:

Смотрите также

Красивые 3D-кнопки с помощью CSS3

Красивые 3D-кнопки с помощью CSS3

Замечательная технология CSS3 позволяет в ряде случаев при оформлении сайта отказаться от использования изображений, которые заменяет чистый CSS-код. К примеру, подобным образом можно поступить с какими-либо кнопками, используемыми на сайте. Есть один замечательный дизайнерский англоязычный .

Скрипт: hover-эффект для любого элемента в Internet Explorer 6

В свете предложенных дополнительных вариантов скрипта, так сказать, на все случаи жизни, в комментариях к статье «Простейший скрипт для реализации hover-эффекта для любого элемента в Internet Explorer 6», а также развернувшихся там же баталий, я решил реинкарнировать данную .

Простейший скрипт для реализации hover-эффекта для любого элемента в Internet Explorer 6

Внимание: рекомендуется обновленная версия данной статьи. Несмотря на то, что данное решение уже опубликовано в РУнете не мной, я просто не могу не написать о нем, т.к. решение, на мой взгляд, достойно внимания, и нужно его популяризовать посредством моего .

Комментарии (153)

Unknown Designer

Всё это прекрасно, но как сделать так, чтобы переходить на какую-нибудь страницу, нажимая по этой динамической кнопке?

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

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

Время чтения: меньше 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&age = 27 здесь пары «имя=значение» разделяются символом «&», а объём данных не может превышать 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 . Скринридер перед озвучиванием содержимого элемента произносит его роль. Если используете неправильные теги, роли перемешаются и это запутает пользователей скринридеров.

      3 способа сделать ссылку кнопкой с помощью HTML

      При создании сайтов с нуля и на конструкторе один из частых вопросов – как сделать кнопку с сcылкой, не используя сложных кодов, программирования, Java Script, посредством одного html. Есть несколько способов сделать элемент, при нажатии на который происходит переход на определенную страницу.

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

      Другая часть интерфейса – ссылки, их гораздо больше, чем кнопок. В виде простого текста (Ссылка) они выглядят неприглядно, не всегда соответствуют дизайну. Основное правило оформления ссылок: пользователь должен понять, что перед ним не обычный текст без наведения мышью.

      Кнопка и ссылка – разные понятия в html. Первая запускает какой-то процесс, вторая перенаправляет куда-либо.

      Пример: оплата в интернете. Человек вводит номер карты в поле и нажимает «Оплатить». Нажатием запускается команда, написанная языком программирования: формируется запрос в банк, деньги списываются со счета. Если поля для заполнения останутся пустыми, при нажатии ничего не произойдет. Пользователь останется на том же месте, не произойдет никаких действий. Команда сработает только при соблюдении необходимых условий. То же произойдет при заполнении данными полей анкет, онлайн-калькуляторов, тестов. В этом случае это элемент

      Вложить

      Использовать JavaScript. Добавить к элементу

      Заставить кнопку действовать, как ссылка – нерациональное решение. Это перегружает код и повышает вероятность ошибок.

      Если нужно перенаправить человека на другую страницу, линк стилизуют под кнопку. Для этого используют CSS.

      Это не язык программирования, а формальный язык для описания оформления внешнего вида HTML-документа.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *