phpjsJqueryhtmlcssblog

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

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

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

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

Скопировать ссылку



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

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

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



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

<a href=здесь_ссылка><img src="https://dwweb.ru/__a-data/img/knopka.png"></a>

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




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


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


Слегка модернизируем!

Добавим класс -

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


a.example,a.example:hover {

border: unset !important;

text-decoration: none !important;

}

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

a.example img:hover {

opacity: 0.8;

}




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


Код html: <a href="" class="example">
<img src="https://dwweb.ru/__a-data/img/knopka.png" alt="replace" title="replace" style="width: 100px;">
</a>
Css:
<style>
a.example,a.example:hover {
border: unset !important;
text-decoration: none !important;
}
a.example img:hover {
opacity: 0.8;
}
</style>

Скопировать ссылку



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

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

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

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

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

Т.е. обернем

<a><button>кнопка ссылка</button></a>

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

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

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

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

Погнали!

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

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

<a href="">
<button class=ex5>Кнопка - это ссылка</button>
</a>


По умолчанию стили для ссылки, которые у меня на сайте : 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 href="" class="example">
<button class=ex>Кнопка ссылка</button>
</a>


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

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;
}





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

button
Скопировать ссылку



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

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

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

Легко!

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

<form method="post" action="здесь_ссылка">
<button type=submit>кнопка ссылка</button>
</form>


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




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

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

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

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

<form method="post" action="здесь_ссылка" target=_blank>
<button type=submit>кнопка ссылка</button>
</form>

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

Если данной информации не хватило - см. ещё: submit ссылка

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---