Как сделать кнопку с ссылкой в html: ссылки или кнопки — Блог HTML Academy

Как сделать ссылку кнопку или кнопку ссылку на HTML? По 3 способа! —

Доброго времени суток! Каждый веб мастер задавался вопросом как же сделать кнопку по клику на которую человек сразу перейдет по нужному адресу. Простая ссылка «a href=»адрес»>Ссылка» выглядит не красиво, и не всегда подходит по дизайну вашего сайта. Так же иногда возникает необходимость сделать обратное. Из обычной кнопки, сделать аналог ссылки, по клику на которой будет происходить переход по нужному адресу.

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

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

Первый способ

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

Итак, создаем обычную ссылку. И указываем адрес к нашим стилям, которые напишем чуть-чуть ниже.

<link rel="stylesheet" href="link_button.css">
<a href="https://you-hands.ru">Ваша ссылка</a>

А вот и они, виновники нашей победы над текстовой ссылкой, стили. Они преобразуют ее в кнопку.

a{
	padding: 10px 10px;/* отступы от текста до краев */
	text-decoration: none;/* убираем декорирование */
	-moz-appearance: button; /* преобразование для Firefox */
	-webkit-appearance: button; /* преобразование для Chromium */	
}

Таким способом мы заменили все ссылки на странице на кнопки.

Второй способ

Этот способ достаточно банален и прост. Скорее всего именно так вы и хотели сделать такую кнопку изначально. Просто оберните картинку кнопки тегом ««!

<a href="you-hands.ru"><img src="button.png"></a>

Правда, теперь, если вы захотите сменить текст, вам придется нарисовать кнопку заново. Плюс, такая кнопка занимает больше места, трафика и времени загрузки страницы. Такой способ можно использовать для создания сложных кнопок, таких, которые невозможно сделать стилями CSS.

Третий способ

Этот способ практический такой же как и первый, за исключением того, что в первом методе мы использовали стили кнопок «по умолчанию«, сейчас же мы нарисуем свою кнопку «

с блэк джеком и контуром!«.

<link rel="stylesheet" href="link_button_3.css">
<a href="https://you-hands.ru">Ваша ссылка</a>
.ssilka{
	border:1px solid #ccc; /*рамка*/
	background:#eaeaea; /*фон*/
	padding: 10px 10px; /*отступы внутри*/
	text-decoration: none; /*убрать подчеркивание ссылки*/
}

Выглядеть такая ссылка будет как вам захочется. Нужно только придумать и написать стиль для нее. Текст меняется легко и не загромождает html код. Так-же, такая ссылка будет индивидуальной в отличие от первого способа, где заменялись все ссылки.

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

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

Первый способ

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

<form action="https://you-hands.ru" method="GET">
	<button type="submit" >Кнопка как ссылка</button>
</form>

Второй способ

Тут мы уже задействуем магию JavaScript! Для этого, создадим функцию, которая будет перенаправлять пользователя куда нам нужно. И сделаем это так, чтоб можно было использовать эту функцию быстро и удобно в будущем.

<script type="text/javascript">
	function GoUrl(url){
		location.href=url;
	}
</script>

Что-бы воспользоваться функцией нужно лишь прописать свойство onClick для любой кнопки.

<button type="submit">Кнопка как ссылка 2</button>

Третий способ

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

<button type="submit">Кнопка как ссылка 3</button>

Итоги

Как и всегда, несколько способов делают почти одно и тоже. Каким будите пользоваться именно вы, решать вам. Если остались какие-то вопросы, можно задать их в комментариях на сайте. Удачи!

4.14/5 (11)

Оцените

Рейтинг

HTML кнопка, как ссылка и ссылка, как кнопка

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

Итак, приступим.

Внимание:
В коде я указываю «ВАША_ССЫЛКА_НА_СТРАНИЦУ» или «https://bloggood.ru/». Естественно, вам нужно заменить эти адреса своими.

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

 1  способ:
В атрибут «action» поместите URL-адрес, на который должна вести «кнопка»:


<form action="ВАША_ССЫЛКА_НА_СТРАНИЦУ " method="GET">
<input ENGINE="submit" value="Кнопка" />
</form>

2 способ:
Также можно использовать HTML события:


<input value="Кнопка" type="button" />

3 способ:
Тоже взят из HTML события, только другим способом:

JS:


<script type="text/javascript">
function BlogGood()
{
location. href='https://bloggood.ru/';
}
</script>

HTML:


<input value="Кнопка" type="button" />

BlogGood() – это название функции вы можете назвать по своему.

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

Теперь сделаем так, чтобы ссылка отображалась, как кнопка .

1  способ:
Самое простое решение – это нарисовать кнопку и обхватить ее тегами ссылки <a>:


<a href=" ВАША_ССЫЛКА_НА_СТРАНИЦУ "><img src="knopka.jpeg"></a>

2 способ:

Можно использовать особое правило в CSS «-moz-appearance и -webkit-appearance» со значением «button» :

CSS:


a
{
-moz-appearance: button; /* Firefox */
-webkit-appearance: button; /* Chromium */
padding: .2em .75em;
text-decoration: none;
}

HTML:


<a href="https://bloggood.ru">ССЫЛКА на BLOGGOOD.RU</a>

3 способ:

Вы можете в CSS прописать свои стили для кнопки.
Выглядеть это будет вот так:

CSS:


.ssilka {
border:1px solid #ccc; // рамка
background:#eaeaea; //фон
padding: .2em .75em; //отступы внутри
text-decoration: none; //убрать подчеркивание ссылки
}

HTML:


<a href="https://bloggood.ru">ССЫЛКА на BLOGGOOD.RU</a>

Вроде, ничего не пропустил и ничего не напутал.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

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

Метки: css, html, javascript, Вебмастеру, для сайта

Цвета ссылок HTML

❮ Предыдущая Далее ❯


HTML-ссылка отображается другим цветом в зависимости от был ли он посещен, не посещен или активен.


Цвета ссылок HTML

По умолчанию ссылка выглядит следующим образом (во всех браузерах):

  • Непосещенная ссылка подчеркнута и окрашена в синий цвет
  • Посещенная ссылка подчеркнута и окрашена в фиолетовый цвет
  • Активная ссылка подчеркнута и окрашена в красный цвет

Вы можете изменить цвета состояния ссылки с помощью CSS:

Пример

Здесь непросмотренная ссылка будет зеленой без подчеркивания. Посещенная ссылка будет розовым без подчеркивания. Активная ссылка будет выделена желтым цветом и подчеркнута. Кроме того, при наведении мыши на ссылку (a:hover) она станет красной и подчеркнутой:

<стиль>
a:link {
  цвет: зеленый;
  background-color: прозрачный;
  украшение текста: нет;
}

a:посетили {
 цвет: розовый;
  background-color: прозрачный;
текстовое оформление: нет;
}

a:hover {
 цвет: красный;
  background-color: прозрачный;
  text-decoration: подчеркивание;
}

a:active {
  цвет: желтый;
  background-color: прозрачный;
оформление текста: подчеркивание;
}

Попробуйте сами »



Кнопки ссылок

Ссылку также можно оформить как кнопку с помощью CSS:

Это ссылка

Пример




   


       

Простая HTML-кнопка


       
           
       

   

В приведенном выше примере мы создали кнопку, а тег создает ссылку на другую страницу (www.google.com)

Результат

Результат показывает, что после нажатия кнопки « Click » вы будете мгновенно перешел к « Google ».

Создание кнопки со ссылкой на другую страницу с помощью тега

Мы можем создать кнопку со ссылкой на другую страницу с помощью тега . Для этого нам понадобится тег и атрибут onclick="" для указания ссылки.

Следующий код использует тег для создания кнопки со ссылкой на другую страницу.

Пример


   
   
   
    Кнопка
   


   


       

Кнопка HTML-ссылки с тегом ввода


       
   

В коде тег используется с атрибутами «type», «onclick», «class» и «value». Ссылка вставляется в HTML-атрибут onclick.

Вывод

Вывод показывает, что после нажатия кнопки « Нажмите кнопку «», и вы сразу же перейдете на страницу входа в систему « Instagram ».  

Создание кнопки со ссылкой на другую страницу с помощью тега

Мы можем создать кнопку со ссылкой на другую страницу с помощью тега . Для этого нам понадобится тег с атрибутом action для указания пути к странице. Следующий код представляет собой функциональность тега для создания ссылки кнопки на другую страницу:

Пример


   
   
   
    Кнопка
   


   

Оставить комментарий

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

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

© 2019 Штирлиц Сеть печатных салонов в Перми

Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми.