Как из ссылки сделать кнопку css

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

В этом примере при щелчке по кнопке открывается веб-страница new.html в новой вкладке.

Одну форму нельзя вкладывать внутрь другой. Перед добавлением кнопки убедитесь что у вас только одна форма.

Использование CSS

Раз кнопку нельзя сделать ссылкой, то вообще отказываемся от и стилизуем ссылку, чтобы она стала похожа на кнопку. В примере 2 показан класс btn , при добавлении его к элементу ссылка меняет своё оформление.

Пример 2. Стилизация ссылки

Результат данного примера показан на рис. 1.

Рис. 1. Стилизация ссылки

Использование JavaScript

Для перехода к указанной веб-странице можно воспользоваться событием onclick, добавляя его к элементу . Внутри onclick пишем document.location , а в качестве значения адрес желаемой веб-страницы (пример 3). Обратите внимание на комбинацию кавычек, адрес веб-страницы берётся в одинарные кавычки.

Пример 3. Событие onclick

См. также

• Атрибуты
• Кнопки
• Кнопки
• Кнопки в Bootstrap 4
• Отправка данных формы
• Отправка данных формы
• Построение форм
• Событие onclick
• Создание кнопок
• Создание форм
• Сумасшедшие формы
• Формы
• Формы в Bootstrap 4
• Формы в HTML

Ссылка как кнопка

Сделайте ссылку, которая при наведении на неё курсора мыши меняла свой вид, как показано на рис. 1. Вверху показана исходная ссылка, внизу ссылка после наведения курсора.

Статьи по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные задачи

• TEX
• Отступы между блоков
• Андроид в тени
• Ссылка как кнопка
• Вложенные списки
• Форма регистрации
• Объединение ячеек таблицы
• Обязательные поля формы
• Цвет и фон в таблице
• Асуанская плотина
• Батарейка
• Заголовки

О сайте

Основные разделы

HTML

CSS

Сайт

© 2002–2024 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru

Как создать HTML кнопку, которая действует как ссылка

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

Вы можете выбрать один из следующих методов добавления ссылки на HTML кнопку.

Добавьте строчный onclick event

Пример

html> html> head> title>Заголовок документа title> head> body> button onclick="window.location.href = 'https://w3docs.com';">Click Here button> body> html>

Этот пример может не работать, если кнопка находится внутри тега .

Пример

html> html> head> title>Заголовок документа title> head> body> form> input type="button" onclick="window.location.href = 'https://www.w3docs.com';" value="w3docs"/> form> body> html>

Ссылки не будут работать, если JavaScript не используется, а поисковая система может проигнорировать такие ссылки.

Используйте атрибут action или formaction внутри элемента .

1. атрибут action

Пример

html> html> head> title>Заголовок документа title> head> body> form action="https://www.w3docs.com/"> button type="submit">Click me button> form> body> html>

Для того, чтобы открыть ссылку в новой вкладке, добавьте атрибут target=»_blank» .

Пример

html> html> head> title>Заголовок документа title> head> body> form action="https://www.w3docs.com/" method="get" target="_blank"> button type="submit">Click me button> form> body> html>

Так как нет форм и данных, этот пример семантически не будет иметь смысла. Но данная разметка допустима.

1. б. атрибут HTML5 formaction .

Пример

html> html> head> title>Заголовок документа title> head> body> form> button type="submit" formaction="https://www.w3docs.com">Click me button> form> body> html>

Атрибут formaction используется только для кнопок с type=”submit”. Так как этот атрибут является HTML5-specific, он может слабо поддерживаться в старых браузерах.

Добавьте ссылку в стиле HTML кнопки (используя CSS)

Пример

html> html> head> title>Заголовок документа title> style> .button < background-color: #FF4500; border: none; color: white; padding: 20px 34px; text-align: center; text-decoration: none; display: inline-block; font-size: 20px; margin: 4px 2px; cursor: pointer; > style> head> body> a href="https://www.w3docs.com/" class="button">Click Here a> body> html>

Так как требуется сложное стилевое оформление, этот метод может не работать в некоторых браузерах.

Создаем динамические кнопочки-ссылки с помощью 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

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

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

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

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

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

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

Unknown Designer

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