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

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

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

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

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

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

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

О сайте

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

HTML

CSS

Сайт

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

Как создать кнопку сайта?

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

В этой инструкции показано, как создать свою кнопку.

• Обычная кнопка
• Кнопка с фоновым изображением
• Кнопка на CSS
• Ваша кнопка на других сайтах
• Установка кнопки на сайт

Обычная кнопка

В качестве обычной кнопки используются HTML теги input или button . Однако, для этих тегов нет атрибута href, который мог бы направить пользователя на другую страницу. Поэтому им часто добавляют атрибут onclick с указанием ссылки, по которой нужно перейти:

Выглядит это следующим образом:

Кнопка с фоновым изображением

Если у вас есть изображение кнопки, то его можно использовать в обычной ссылке, например так:

Выглядит это следующим образом:

Чтобы получить такой результат, нужно сделать две вещи:

1. Создать изображение кнопки. Самостоятельно или с помощью онлайн-сервисов (например, cooltext.com).
2. Загрузить на сайт изображение и получить ссылку на него. Для этого можно воспользоваться файловым менеджером.

Кнопка на CSS

Кнопку можно оформить с помощью CSS. Для этого добавьте стили в шаблон сайта и укажите класс кнопки.

Добавьте в разделе Панель управления / Дизайн / Редактор / CSS:

.site-button

Тогда HTML-код самой кнопки будет следующим:

А на сайте кнопка отобразится так:

Не пугайтесь, если CSS кажется вам незнакомым и странным. Чтобы настроить кнопку под свои нужды, достаточно изменить отступы / размер шрифта в пикселях и цвет фона / текста в HEX (чтобы посмотреть все цвета, наберите в Яндексе запрос «hex цвета онлайн»).

Ваша кнопка на других сайтах

В некоторых случаях есть необходимость давать пользователям возможность устанавливать вашу кнопку на своих сайтах. Если предоставите готовый HTML-код кнопки, то они без труда смогут это сделать. Для этого нам потребуется создать текстовое поле и поместить внутрь него готовый код. Каждый тип кнопки будет иметь свой код:

Обычная кнопка

Кнопка с фоновым изображением

Кнопка на CSS

Установка кнопки на сайт

Теперь необходимо добавить код кнопки на свой сайт. Это удобно делать с помощью конструктора:

Добавьте код кнопки в блок:

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

Как создать 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>

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

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

«кнопку ссылкой» или как сделать «кнопку-ссылку«. Сколько вариантов существует переделать кнопку в ссылку? И кнопку «button» — тоже превратим в ссылку.

Подробно о «кнопке в ссылке» и «ссылки в кнопках»!

1. Как сделать кнопку ссылкой.(img)
2. Как сделать кнопку ссылкой в html
3. Как сделать кнопку ссылкой в html №2
4. Поведение кнопки как ссылки в теге form

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

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

Возьмем первую попавшуюся кнопку из интернета. кнопка — картинка. Давайте её здесь выведем. Если наведем мышку на данную кнопку. то ничего не будет происходить. поскольку данная кнопка не является ссылкой — это » картинка «

Далее. просто обернем нашу картинку тегом ссылки

И выведем результат:

Кнопка обернутая ссылкой:

У нас появилась рука( курсора с рукой) при наведении на кнопку + border снизу. Не совсем эстетично.

class=»example»

Уберем бордюр и text-decoration и продублируем с hover

border: unset !important;

text-decoration: none !important;

И давайте. навесим хоть какой-то эффект при наведении. пусть это будет «opacity»

Ну вот. примерно, какая кнопка у нас получилась с ссылкой.

Код html:

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

Если говорим о кнопке в html? а именно о теге button :

То и такую кнопку можно превратить в ссылку!

Кроме внешнего вида, но и сделать, чтобы она выполняла пряму роль ссылки — переход по ссылке.

Мы превратим кнопку в ссылку аналогичным способом, что рассматривали выше пунктом!

Но если мы выведем выше приведенную кнопку ссылкой, то получим. не пойми что. то ли кнопка. то ли ссылка:

Нам нужно навесить на такую кнопку-ссылку немного стилей, чтобы кнопка была похожа на ссылку.

И далее можно пойти двумя путями. 1). просто уничтожить стили кнопки 2). декорировать кнопку под ссылку!

Декорируем кнопку под ссылку:

Начнем с html кода кнопки-ссылки:

По умолчанию стили для ссылки, которые у меня на сайте : text-decoration отключен, добавлен border и продублируем с hover, кроме цвета и цвета бордюра. он прозрачный :

a <
color: #969696;
text-decoration: none;
border-bottom: 1px solid #b3b3b3;
>
a:hover <
color: #000000;
text-decoration: none;
border-bottom: 1px solid #b3b3b300;
>

Добавим стили к нашей кнопке или точнее удалим все признаки кнопки.

button.ex5 <
border: none;
background: none;
cursor: pointer;
>

Смотрим, что у нас получилось.

Результат превращения кнопки в ссылку:

И естественно, что при таком html коде, кнопка будет отрабатывать задачу ссылки, т.е. будет переходить по указанному адресу. Для того, чтобы проверить — работает ли кнопка-ссылка, нажмите по ниже идущей ссылке-кнопке:

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

Следующий вариант копия предыдущего пункта, но только стили будут другие. превратим в ссылку кнопку, а стили кнопки уничтожим!

Для того, чтобы реализовать данный пример кнопки-ссылки нам потребуется html каркас:

Уничтожим поведение ссылки:

a.example, a.example:hover <
border: unset !important;
text-decoration: none !important;
>

Превратим кнопку button в ссылку, сначала уничтожим все признаки кнопки и добавим «cursor» и в самом низу добавим бордюр снизу.

button.ex <
border: unset;
background: unset;
cursor: pointer;
border-bottom: 1px solid;
>

И нарисуем поведение. через hover — удалим бордюр, сделаем цвет прозрачным:

button.ex:hover <
border-bottom: 1px solid #ff000000;
>

У нас получилась кнопка-ссылка:

Поведение кнопки как ссылки в теге form

Предположим, что выше описанные примеры превращения кнопки в ссылку не подходят!

Можно ли реализовать поведение кнопки как ссылки через тег form?

Для того, чтобы реализовать данный пример кнопки-ссылки через тег form нам понадобится. этот самый тег и внутри кнопка. в action помещаем ссылку на страницу, куда надо перейти.

Далее поместим приведенный пример «кнопки ссылки» прямо здесь:

Результат превращения button в ссылку через тег form

Кнопка ссылка открывает в новом окне.

Но как сделать, чтобы кнопка-ссылка открывала в новом окне? Нужно добавить target=_blank в тег form:

Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru!
© 2015 — 2024 Контакты. Реклама на сайте
Лучший хостинг : RUWEB + помощь по RUWEB