Содержание

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

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

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

концепция: Я создаю пользовательский элемент управления с тегом. Затем в кнопку я помещаю событие onclick, которое устанавливает документ.расположение до нужного значения с помощью 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's 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

преимущества этой схемы: она выглядит как элемент управления. Вы пишете один тег для него,

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

пока способности ограничены, вы можете легко расширить его, добавив больше свойств. Вероятно, большинство свойств просто должны были бы «пройти через» к базовой кнопке, как я сделал для text, enabled и cssclass.

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

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

Почему бы просто не разместить свою кнопку внутри ссылочного тега, например

<a href="https://www.google.com/"><button>Next</button></a>

Это, кажется, работает отлично для меня и не добавляет тегов %20 к ссылке, так, как вы этого хотите. Я использовал ссылку на Google, чтобы продемонстрировать.

Конечно, вы можете обернуть это в тег формы, но это не обязательно.

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

<a href="myOtherFile"><button>Next</button></a>

Это также не добавляет никаких символов в конец URL-адреса, однако в нем есть путь к файлу проекта в качестве URL-адреса до окончания имени файла. например

Если бы моя структура проекта была…

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

..public
|||| ..html
|||| |||| -main.html
|||| |||| -secondary.html

Если я открою main.html, URL будет

http://localhost:0000/public/html/main.html?_ijt=i7ms4v9oa7blahblahblah

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

http://localhost:0000/public/html/secondary.html

Никаких специальных символов в конце URL нет. Надеюсь, это поможет. Кстати — ( %20 обозначает пробел в URL-адресе, который он кодирует и вставляет вместо них.)

Примечание: localhost: 0000, очевидно, не будет 0000, у вас там будет свой собственный номер порта.

Кроме того,? _Ijt = xxxxxxxxxxxxxx в конце URL main.html, x определяется вашим собственным соединением, поэтому очевидно, что оно не будет равным моему.


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

меняем цвет и фон, превращаем в кнопку, придаем интерактивность

Основы CSS: стилизация ссылок

От автора: интернет был основан на ссылках. Именно идея того, что мы можем кликать/нажимать на ссылки и переходить с одной веб-страницы на другую сделала фразу «серфить интернет» бытовой. Стилизация ссылок CSS помогает сделать их какими угодно. Хотя в HTML они отличаются от обычного текста даже без CSS.

Ссылки имеют синий цвет (просмотренные – фиолетовый). У них есть подчеркивание. В демо представлена самая простейшая ссылка.

Но что если мы хотим немного изменить ситуацию? Возможно, синий не подходит под дизайн вашего сайта. Может, вам не нравятся подчеркивания. Причина не важна – CSS позволяет стилизовать ссылки, как и любые другие элементы. Нам лишь нужно определить ссылку в стилях.

Хотите взять другой шрифт, сменить цвет, удалить подчеркивание и перевести все буквы в верхний регистр? Конечно, почему нет?

Основы CSS: стилизация ссылок

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

a { color: red; text-decoration: none; text-transform: uppercase; }

a {

  color: red;

  text-decoration: none;

  text-transform: uppercase;

}

Уже намного лучше! Но зачем останавливаться? Давайте рассмотрим пару других способов стилизации ссылок для завершения UX.

Стилизация всех состояний ссылки

Ссылки обладают разными состояниями, они адаптируются при взаимодействии с ними на странице. При изменении стандартных стилей ссылки необходимо обратить внимание на 3 дополнительных состояния:

Hover (:hover): когда курсор расположен над ссылкой без клика

Visited (:visited): ссылка, по которой пользователь переходил ранее, но на которую сейчас не наведен курсор

Active (:active): ссылка в процессе нажатия. Состояние очень быстрое – когда кнопка нажата, но до завершения щелчка.

Ниже представлена ссылка из предыдущего демо. Сперва попробуйте навести курсор на нее без клика. Обратите внимание, под ссылкой появляется подчеркивание. Кликните на нее и зажмите – так вы увидите активное состояние ссылки, когда ее цвет становится черным. Отпустите кнопку мыши, и ссылка станет фиолетовой еще до ее посещения.

Концепция ссылки кажется простой, но там много чего происходит – и CSS дает нам невероятную мощь по настройке UX!

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

На эту тему ведутся споры, но мы можем с помощью CSS превратить текстовую ссылку в кнопку.

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

Основы CSS: стилизация ссылок

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

a { background-color: red; color: white; padding: 1em 1.5em; text-decoration: none; text-transform: uppercase; }

a {

  background-color: red;

  color: white;

  padding: 1em 1.5em;

  text-decoration: none;

  text-transform: uppercase;

}

Отлично! Давайте добавим нашей кнопке интерактивности и применим полученные в предыдущем разделе знания. При наведении курсора кнопка будет темно-серой, черной по клику и светло-серой после посещения:

a { background-color: red; color: white; padding: 1em 1.5em; text-decoration: none; text-transform: uppercase; } a:hover { background-color: #555; } a:active { background-color: black; } a:visited { background-color: #ccc; }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

a {

  background-color: red;

  color: white;

  padding: 1em 1.5em;

  text-decoration: none;

  text-transform: uppercase;

}

 

a:hover {

  background-color: #555;

}

 

a:active {

  background-color: black;

}

 

a:visited {

  background-color: #ccc;

}

Стилизация ссылки под кнопку и работа с состояниями позволяет нам создавать прикольные эффекты. Например, давайте создадим эффект нажатия кнопки.

О, и курсоры!

Мы уже довольно далеко зашли в стилизации ссылок, и есть один компонент, который мы не можем игнорировать — курсор. Курсор показывает положение мыши на экране. Мы привыкли к обычной черной стрелке:

Основы CSS: стилизация ссылок

При наведении курсора мы можем заменить стрелку на руку (:hover) – так будет проще понять, что со ссылкой можно взаимодействовать:

Основы CSS: стилизация ссылок

a:hover { cursor: pointer; }

a:hover {

  cursor: pointer;

}

Так намного лучше! Мы получили красивую ссылку, которая похожа на кнопку с подходящими интерактивными подсказками.

Автор: Geoff Graham

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Основы CSS: стилизация ссылок

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее Основы CSS: стилизация ссылок

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Делаем ссылку с помощью HTML

Обязательные атрибуты тега

К обязательным атрибутам стоит отнести href (адрес ссылки). Адрес ссылки может быть как абсолютным (например, “http://nubex.ru”), так и относительным (к, примеру, “/we/”). Относительный путь указывается относительно главной страницы (чтобы сослаться на главную страницу сайта, используйте “/”).

Между открывающим тегом <a> и закрывающим </a> пишется текст, который будет выводиться в виде гиперссылки (такой текст еще называют анкором или якорем). В качестве анкора может выступать не только текст, но и картинка.

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

<a href="http://nubex.ru">Nubex</a>

Необязательные атрибуты тега

К основным необязательным атрибутам гиперссылок относятся:

  • title — служит для добавления всплывающей подсказки к ссылке;
  • name — используется для определения якоря внутри страницы;
  • target — указывает браузеру, куда загружать документ;
  • accesskey — дает возможность активации ссылки с помощью определенных горячих клавиш.

Рассмотрим более актуальный способ, как сделать ссылку на страницу в HTML с использованием основных атрибутов:

<a title="Конструктор сайтов Нубекс" accesskey="n" name="nubex" href="http://nubex.ru" target="_blank"> Нубекс</a>

Теперь посмотрим на нашу ссылку: Нубекс

Текст, указанный в атрибуте title будет всплывать при наведении курсора на ссылку. Атрибут target=»_blank» означает, что ссылка будет открываться в новом окне. accesskey=»n» позволяет активировать ссылку комбинацией клавиш (для Google Chrome – это Alt+N), где n — это указанная в теге клавиша. Чтобы определить, как работает тег name, рассмотрим его более подробно.

Атрибут name

Атрибут name используется для определения якоря внутри страницы. Это означает, что можно ссылаться на определенные области внутри одной страницы. Рассмотрим на примере:

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Как сделать ссылку на сайт в HTML</title>
 </head>
 <body>
  <p><a name="nubex"></a></p>  
  <p>Большое-большое полотно текста. Прокрути вниз и нажми «Вверх».</p>
  <p><a href="#nubex">Вверх</a></p> 
 </body>
</html>

В конструкторе сайтов «Нубекс» есть удобный механизм для вставки ссылок при редактировании ссылки. Для более подробной информации читайте статью Как сделать ссылку.

HTML-ссылок на кнопки с onclick href

На этой странице показано, как создать ссылки кнопок HTML с onclick и href с использованием тега

и стилизовать их с помощью CSS в разные цвета и размеры.

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



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

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



Совет: Посетите html-color-names.com или htmlColorCodes.org для сопоставления цветовых палитр.

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

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





Вышеупомянутый