[button] Как сделать ссылку html похожим на кнопку? Как сделать кнопку ссылку


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

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

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

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

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

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

<form action="ВАША_ССЫЛКА_НА_СТРАНИЦУ " method="GET"> <input type="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, Вебмастеру, для сайта

bloggood.ru

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

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

Правильно

Синтаксически корректное («валидное») и кроссбраузерное решение — заключить кнопку в простейшую форму. В атрибут action формы следует поместить URL-адрес, на который должна вести «кнопка-ссылка». Для работы формы в устаревших браузерах (IE8 и ниже) следует добавить кнопке атрибут type="submit":

<form action="/example/">    <button type="submit">Кнопка-ссылка</button></form>

«Кнопка-ссылка» в примере ведёт на страницу с адресом /example/.

Демо

«Живая» демонстрация такой кнопки-ссылки:

Масштабирование Full HD в 4K без размытия

Строка запроса

Строка запроса — часть URL-адреса после первого вопросительного знака, содержащая GET-параметры в виде пар name=value (имя=значение), разделённых символом &.

Если адрес, на который должна указывать ссылка, содержит строку запроса, следует для каждого GET-параметра добавить в форму скрытое поле с соответствующими атрибутами name и value:

<form action="/example/">    <input type="hidden" name="foo"   value="bar" />    <input type="hidden" name="lorem" value="ipsum" />    <button type="submit">Кнопка-ссылка</button></form>

Данная форма ведёт на страницу /example/?foo=bar&lorem=ipsum.

Chromium/Blink и WebKit

В браузерах на основе движков Chromium / Blink (Chrome, Opera 15+, Яндекс.Браузер, Vivaldi) и WebKit (Safari) есть ошибка (1, 2): вопросительный знак, отделяющий строку запроса от основной части адреса, добавляется к адресу даже при отсутствии полей в форме. Поэтому, например, форма:

<form action="/example/">    <button type="submit">Кнопка-ссылка</button></form>

приведёт на адрес /example/? вместо правильного /example/.

Обойти это можно с помощью автоматического серверного перенаправления (редиректа) с адреса, оканчивающегося вопросительным знаком, на такой же адрес без воспросительного знака.

Ограничения по сравнению с реальной ссылкой

  • У пользователя нет возможности узнать, куда ведёт ссылка-кнопка, до щелчка по ней.
  • Пользователь не может по своему желанию открыть ссылку-кнопку в новой вкладке или в новом окне.

Неправильно

Кнопка внутри ссылки

Нередко элемент BUTTON просто помещают внутрь ссылки:

<a href="/example/"><button>Кнопка-ссылка</button></a>

Но согласно HTML5 такое решение синтаксически некорректно («невалидно»): ссылка не должна содержать интерактивные элементы. Кроме того, такая ссылка не работает в Internet Explorer (IE) ниже 9-й версии.

Кнопка с JS-обработчиком щелчка

Порой используется кнопка с JavaScript-обработчиком события щелчка:

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

Но такая кнопка не работает при выключенном JavaScript, и возможны проблемы с индексацией поисковиками, не исполняющими JavaScript-код.

Нестандартные расширения CSS

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

Firefox и Chromium

Firefox и браузеры на основе движка Chromium (Chrome, Opera 15+, Vivaldi, Яндекс.Браузер) поддерживают нестандартные префиксированные варианты свойства appearance, значение button которых позволяет оформить как кнопку произвольный элемент, в том числе ссылку:

A.example {       -moz-appearance: button; /* Firefox */    -webkit-appearance: button; /* Chromium */}

Демо

«Живая» демонстрация такой кнопки-ссылки:

Мелодичная инструментальная музыка

Internet Explorer, Edge и спецификация

В браузерах Microsoft — Internet Explorer (IE) и Edge — возможность недоступна. В спецификации CSS Basic User Interface Module Level 4 значение button свойства appearance не предусмотрено.

tanalin.com

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

Кажется, есть три решения этой проблемы (все с плюсами и минусами).

Решение 1: Кнопка в форме.

<form method="get" action="/page2"> <button type="submit">Continue</button> </form>

Но проблема заключается в том, что в некоторых версиях популярных браузеров, таких как Chrome, Safari и Internet Explorer, он добавляет знак вопроса в конец URL-адреса. Таким образом, другими словами, для кода выше ваш URL-адрес будет выглядеть следующим образом:

http://someserver/pages2?

Есть один способ исправить это, но для этого потребуется конфигурация на стороне сервера. Одним из примеров использования Apache Mod_rewrite было бы перенаправление всех запросов с завершающим ? на их соответствующий URL без ?. Вот пример использования .htaccess, но есть полный поток здесь:

RewriteCond %{THE_REQUEST} \?\ HTTP [NC] RewriteRule ^/?(index\.cfm)? /? [R=301,L]

Аналогичные конфигурации могут различаться в зависимости от используемого веб-сервера и используемого стека. Итак, резюме этого подхода:

Плюсы:

  • Это настоящая кнопка, и семантически это имеет смысл.
  • Так как это настоящая кнопка, она также будет действовать как настоящая кнопка (например, перетаскиваемое поведение и/или имитировать щелчок при нажатии пробела при активном действии).
  • Нет JavaScript, не требуется сложный стиль.

Минусы:

  • Трейлинг ? выглядит уродливым в некоторых браузерах. Это может быть исправлено с помощью взлома (в некоторых случаях) с использованием POST вместо GET, но чистым способом является перенаправление на стороне сервера. Недостатком перенаправления на стороне сервера является то, что он вызовет дополнительный HTTP-вызов для этих ссылок из-за перенаправления 304.
  • Добавляет дополнительный элемент <form>
  • Позиционирование элементов при использовании нескольких форм может быть сложным и ухудшается при работе с адаптивными проектами. Некоторое расположение может стать невозможным для достижения этого решения в зависимости от порядка элементов. Это может в конечном итоге повлиять на удобство использования, если на проект влияет эта проблема.

Решение 2: Использование JavaScript.

Вы можете использовать JavaScript для запуска onclick и других событий, чтобы имитировать поведение ссылки с помощью кнопки. Пример ниже может быть улучшен и удален из HTML, но здесь просто проиллюстрировать идею:

<button>Continue</button>

Плюсы:

  • Простой (для базовых требований) и сохраняющий семантику, не требуя дополнительной формы.
  • Так как это настоящая кнопка, она также будет действовать как настоящая кнопка (например, перетаскиваемое поведение и/или имитировать щелчок при нажатии пробела при активном действии).

Минусы:

  • Требуется JavaScript, что означает менее доступный. Это не идеально подходит для базового (основного) элемента, такого как ссылка.

Решение 3: Якорь (ссылка), стилизованная как кнопка.

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

Плюсы:

  • Простой (для основных требований) и хорошая поддержка кросс-браузера.
  • Не требуется <form> для работы.
  • Не требуется JavaScript для работы.

Минусы:

  • Семантика вроде бы сломана, потому что вам нужна кнопка, которая действует как ссылка, а не ссылка, которая действует как кнопка.
  • Он не будет воспроизводить все действия решения №1. Он не будет поддерживать то же поведение, что и кнопка. Например, при перетаскивании ссылки реагируют по-разному. Также триггер ссылки "пробел" не будет работать без какого-либо дополнительного кода JavaScript. Это добавит много сложности, поскольку браузеры не согласуются с тем, как они поддерживают события keypress на кнопках.

Заключение

Решение №1 (кнопка в форме) кажется наиболее прозрачной для пользователей с минимальной требуемой работой. Если ваш макет не влияет на этот выбор, и настройка на стороне сервера практически осуществима, это хороший вариант для случаев, когда доступность является главным приоритетом (например, ссылки на странице ошибки или сообщения об ошибках).

Если JavaScript не является препятствием для ваших требований к доступности, тогда решение # 2 (JavaScript) будет предпочтительнее, чем # 1 и # 3.

Если по какой-то причине доступность имеет жизненно важное значение (JavaScript не является вариантом), но вы находитесь в ситуации, когда ваш дизайн и/или конфигурация вашего сервера мешают вам использовать параметр №1, тогда решение №3 (Якорь, подобная кнопке), является хорошей альтернативой для решения этой проблемы с минимальным воздействием на использование.

qaru.site

Делаем кнопку input ссылкой

01 авг

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

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

Оказывается исправить это вопиющие безобразием можно и к тому же не одним способом.

Я понятия не имею почему в HTML для такого простого действия приходится делать столько лишних телодвижений, и почему нет какого-нибудь специализированного параметра у этого тега. Но кто знает способ проще или где пройти курсы электриков подешевле, прошу в комменты.

Самый надежный способ из всех – это использование чистого HTML без JS (Способ №1), так как ваш посетитель может использовать браузер с отключенным JavaScript или пользоваться каким-нибудь мобильным браузером, начисто лишенным понимания скриптов.

  1. Способ №1 – чистый HTML:

    <form action=“http://adminway.ru” method=“post”><input type=“submit” value=“Перейти на AdminWay.Ru” /></form>

    Выглядит это так:

    Этот способ открывает ссылку в этом же окне. Как сделать, чтобы все открывалось в новой странице, я не знаю и поэтому привел Способ №2

  2. Способ №2 – с использованием JS:

    <form><input type=“button” value=“Перейти на AdminWay.Ru” onClick=“window.location=‘http://adminway.ru’” /></form>

    Работает это так:

    В общем то внешних отличий мало, отличия только внутренние. Использование этого метода создания из input`а ссылки, я бы не рекомендовал, так как некоторые ваши посетители могут столкнутся с проблемой неработоспособности таких ссылок.

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

    <form><input type=“button” value=“Перейти на AdminWay.Ru” onClick=“window.open(‘http://adminway.ru’)” /></form>

Эти 2 нехитрые способа помогут использовать вам обычную HTML-кнопку в качестве ссылки. Я, честно, не знаю как такая ссылка будет передавать вес, но перенаправлять пользователей будет как надо.

Комментарии:

adminway.ru

Сделать ссылку HTML с оформлением кнопки CSS

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

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

Как правильно вставить ссылку в HTML

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

Код

<a href="//zornet.ru" >Как сделать ссылку на переход</a>

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

1. download - что отвечает за указание на файл под скачивание файла, архива и другое.

2. name – тот самый якорь.

3. title — это когда наводит клик и появляется подсказка, что за ранее была прописана при установке.

4. accesskey — здесь происходит активация ссылки, что срабатывает при комбинации заданных клавиш.

5. coords – выставляет координаты, что прописаны в активной области.

6. hreflang – распознает язык текста по установленной ссылки.

7. rel — здесь идет соотношение между теми ссылками, что прописаны текущим документами.

8. rev — производится соотношение между текущим и куда будет ссылаться документ.

9 shape — отвечает за указание формы области ссылки на картину или изображение.

10. tabindex — Будет происходить указанная последовательность переключения между поставленными ссылками при клике на клавишу Tab.

11. target — показание окна, где будет сохранен скаченный файл при выборе.

12. type — тип или название документа, куда происходит переход.

Как сделать открытие ссылки в новой вкладке

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

Пример HTML-кода ссылки на открытие новой страницы.

Код

<a href="http://zornet.ru" target="_blank">Здесь делаем клик на переход</a>

Есть такая тема перелинковка, что вы замечали в разных статьях, где под ссылку ставят ключевые слова, здесь устанавливаем.

Код

<a href="ссылка" target="_blank">Ключевое слово</a>

Она же трастовая ссылка:

Код

<a href="Ссылка" rel="" target="_blank"><u>Перейти на интернет ресурс ZorNet.Ru</u></a>

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

Код

<a href="ссылка" target="_blank"><img src="http://zornet.ru/CSS-ZORNET/gerav/refad/faren/demo.png" ></a>

Как сделать ссылку на скачивание файла, архива

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

Код

<a href="http://zornet.ru/_ld/81/8168_Psatun.rar" target="_blank" download="">Скачать </a>

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

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

Безусловно самым лучшим оформлением под ссылку идет оформление кнопки, это задействуем CSS при создание.

Так будет идти HTML-код под ссылку:

Код

<div> <a href="http://zornet.ru" target="_blank" >Открыть</a> </div>

CSS

Код

.zornet_ru a {   display:block;   width:100px;   margin:auto;   padding: 9px 17px;   background:#3d9c3e;   color:#fff!important;   text-decoration:none;   font-size:17px;   text-align: center;   border: 2px solid #c5baba;   border-radius: 34px; }

.zornet_ru a:hover {   color:#fff!important;   text-decoration:none!important;   background:#38cc3a; }

Такая кнопка получится.

Это по умолчанию:

Здесь уже задаем палитру цвета в hover - где только срабатывает при наведение.

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

zornet.ru

[button] Как сделать ссылку html похожим на кнопку? [css]

Применить этот класс к нему

.button { font: bold 11px Arial; text-decoration: none; background-color: #EEEEEE; color: #333333; padding: 2px 6px 2px 6px; border-top: 1px solid #CCCCCC; border-right: 1px solid #333333; border-bottom: 1px solid #333333; border-left: 1px solid #CCCCCC; } <a href="#">Example</a>

ИМХО, есть лучшее и более элегантное решение. Если ваша ссылка:

<a href="http://www.example.com">Click me!!!</a>

Соответствующая кнопка должна быть такой:

<form method="GET" action="http://www.example.com"> <input type="submit" value="Click me!!!"> </form>

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

Свойство appearance CSS3 обеспечивает простой способ стилизации любого элемента (включая привязку) с помощью встроенных стилей <button> браузера:

a.btn { -webkit-appearance: button; -moz-appearance: button; appearance: button; } <body> <a>CSS Button</a> </body>

CSS Tricks имеет приятный контур с более подробной информацией об этом. Имейте в виду, что ни одна версия Internet Explorer в настоящее время не поддерживает это в соответствии с caniuse.com .

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

Например, вы можете переходы с фоновым цветом с использованием свойства -webkit-transition и pseduo-classes. Некоторые из этих проектов могут стать довольно сумасшедшими, но это дает фантастическую альтернативу тому, что в прошлом могло быть сделано, скажем, вспышкой.

Например (на мой взгляд, это умопомрачительно), http://tympanus.net/Development/CreativeButtons/ (это серия полностью готовых анимаций для кнопок, с исходным кодом на исходной странице ). http://www.commentredirect.com/make-awesome-flat-buttons-css/ (в то же время эти кнопки имеют приятные, но минималистичные эффекты перехода, и они используют новый «плоский» стиль дизайна.)

Это также немного вникает в детали css и дает вам несколько изображений:

http://www.dynamicdrive.com/style/csslibrary/item/css_square_buttons/

code-examples.net

css - Как сделать ссылку html похожим на кнопку?

Много запоздалый ответ:

Я боролся с этим, когда я впервые начал работать в ASP. Здесь лучшее, что я придумал:

Концепция: Я создаю настраиваемый элемент управления с тегом. Затем в кнопке я помещаю событие onclick, которое устанавливает document.location в нужное значение с помощью JavaScript.

Я вызвал элемент управления ButtonLink, так что я мог легко получить, если его путают с LinkButton.

ASPX:

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="ButtonLink.ascx.vb" Inherits="controls_ButtonLink" %> <asp:Button runat="server"/>

код позади:

Partial Class controls_ButtonLink Inherits System.Web.UI.UserControl Dim _url As String Dim _confirm As String Public Property NavigateUrl As String Get Return _url End Get Set(value As String) _url = value BuildJs() End Set End Property Public Property confirm As String Get Return _confirm End Get Set(value As String) _confirm = value BuildJs() End Set End Property Public Property Text As String Get Return button.Text End Get Set(value As String) button.Text = value End Set End Property Public Property enabled As Boolean Get Return button.Enabled End Get Set(value As Boolean) button.Enabled = value End Set End Property Public Property CssClass As String Get Return button.CssClass End Get Set(value As String) button.CssClass = value End Set End Property Sub BuildJs() ' This is a little kludgey in that if the user gives a url and a confirm message, we'll build the onclick string twice. ' But it not that big a deal. If String.IsNullOrEmpty(_url) Then button.OnClientClick = Nothing ElseIf String.IsNullOrEmpty(_confirm) Then button.OnClientClick = String.Format("document.location='{0}';return false;", ResolveClientUrl(_url)) Else button.OnClientClick = String.Format("if (confirm('{0}')) {{document.location='{1}';}} return false;", _confirm, ResolveClientUrl(_url)) End If End Sub End Class

Преимущества этой схемы: он выглядит как элемент управления. Вы пишете для него один тег, < ButtonLink id = "mybutton" navigateurl = "blahblah" / >

Результирующая кнопка является "реальной" кнопкой HTML и поэтому выглядит как настоящая кнопка. Вам не нужно пытаться имитировать внешний вид кнопки с помощью CSS, а затем бороться с разными взглядами на разные браузеры.

Пока возможности ограничены, вы можете легко расширить его, добавив больше свойств. Вероятно, что большинству свойств просто нужно "пройти через" к базовой кнопке, как это делалось для текста, включенного и cssclass.

Если кто-нибудь получит более простое, более чистое или иное лучшее решение, я был бы рад услышать его. Это боль, но она работает.

qaru.site