страницу - красивые кнопки html




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

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

Мне также хотелось бы, чтобы в URL не было никаких лишних символов или параметров.

Как я могу это достичь?

Основываясь на ответах, опубликованных до сих пор, я в настоящее время делаю это:

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

но проблема заключается в том, что в Safari и Internet Explorer он добавляет знак вопроса в конец URL-адреса. Мне нужно найти решение, которое не добавляет никаких символов в конец URL-адреса.

Для этого есть два других решения: использование JavaScript или стилизация ссылки, чтобы выглядеть как кнопка.

Использование JavaScript:

<button onclick="window.location.href='/page2'">Continue</button>

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

<a href="/link/to/page2">Continue</a>

HTML

Простой способ HTML состоит в том, чтобы поместить его в <form> котором вы указываете желаемый целевой URL в атрибуте action .

<form action="http://google.com">
    <input type="submit" value="Go to Google" />
</form>

При необходимости установите display: inline; CSS display: inline; на форме, чтобы держать ее в потоке с окружающим текстом. Вместо <input type="submit"> в приведенном выше примере вы также можете использовать <button type="submit"> . Единственное отличие состоит в том, что элемент <button> позволяет детям.

Вы бы интуитивно ожидали, что сможете использовать <button href="http://google.com"> аналогичный элементу <a> , но, к сожалению, этот атрибут не существует в соответствии со спецификацией HTML .

CSS

Если CSS разрешен, просто используйте <a> который вы придерживаетесь как кнопка, используя, среди прочего, свойство appearanceнастоящее время поддержка только Internet Explorer (июль 2015 года) по-прежнему оставляет желать лучшего ).

<a href="http://google.com" class="button">Go to Google</a>
a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

Или выберите одну из этих многих библиотек CSS, таких как Bootstrap .

<a href="http://google.com" class="btn btn-default">Go to Google</a>

JavaScript

Если JavaScript разрешен, установите window.location.href .

<input type="button" onclick="location.href='http://google.com';" value="Go to Google" />

@ Nicolas, после работы для меня, поскольку у вас не было type="button" из-за чего он начал вести себя как тип отправки ... так как у меня уже есть один тип submit.it не работал для меня .... и теперь вы можете добавить класс к кнопке или <a> чтобы получить требуемый макет:

<a href="http://www.google.com/">
    <button type="button">Click here</button>
</a>

Другой вариант - создать ссылку в кнопке:

<button type="button"><a href="yourlink.com">Link link</a></button>

Затем используйте CSS для стилизации ссылки и кнопки, чтобы ссылка занимала все пространство внутри кнопки (так что пользователю не нужно промахиваться):

button, button a{position:relative;}
button a{top:0;left:0;bottom:0;right:0;}

Здесь я создал демо .


Единственный способ сделать это (за исключением изобретательной идеи BalusC!) - это добавить к кнопке событие onclick JavaScript, что не подходит для доступности.

Вы считали стиль обычной ссылки, как кнопка? Вы не можете достичь определенных кнопок OS, но это по-прежнему лучший способ ИМО.


Если вы согласитесь с тем, что добавили еще несколько человек, вы можете сходить с ума только с помощью простого CSS-класса без PHP, без кода jQuery , простого HTML и CSS.

Создайте класс CSS и добавьте его в свой якорь. Код ниже.

.button-link {
    height:60px;
    padding: 10px 15px;
    background: #4479BA;
    color: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-link:hover {
    background: #356094;
    border: solid 1px #2A4E77;
    text-decoration: none;
}

<HTML>
    <a class="button-link" href="http://www.go-some-where.com"
       target="_blank">Press Here to Go</a>

Вот и все. Это очень легко сделать и позволяет вам быть настолько креативным, насколько хотелось бы. Вы управляете цветами, размером, формами (радиус) и т. Д. Для получения дополнительной информации см. Сайт, на котором я нашел это .


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

Ваша кнопка будет состоять из трех вложенных частей: обертки div, якоря и h1, например:

<div class="link-button-wrapper">
    <a href="your/link/here">
        <h1>Button!</h1>
    </a>
</div>

Затем в CSS ваш стиль должен выглядеть так:

.link-button-wrapper {
    width: 200px;
    height: 40px;
    box-shadow: inset 0px 1px 0px 0px #ffffff;
    border-radius: 4px;
    background-color: #097BC0;
    box-shadow: 0px 2px 4px gray;
    display: block;
    border:1px solid #094BC0;
}
.link-button-wrapper > a {
    display: inline-table;
    cursor: pointer;
    text-decoration: none;
    height: 100%;
    width:100%;
}
.link-button-wrapper > a > h1 {
    margin: 0 auto;
    display: table-cell;
    vertical-align: middle;
    color: #f7f8f8;
    font-size: 18px;
    font-family: cabinregular;
    text-align: center;
}

Here's jsFiddle чтобы проверить это и поиграть с ним.

Преимущества этой настройки: 1. Создание дисплея обертки div: блок упрощает центрирование (с использованием поля: 0 авто) и положение (в то время как <a> является встроенным и сложнее в положение и невозможно центрировать).

  1. Вы можете просто сделать <a> display: block, переместить его и нарисуйте как кнопку, но тогда вертикальное выравнивание текста внутри него становится затруднительным.

  2. Это позволяет вам отображать <a> display: inline-table и <h1> display: table-cell, которая позволяет использовать вертикальную выровненность: посередине на <h1> и центрировать ее по вертикали (что всегда приятно на кнопка). Да, вы можете использовать прописку, но если вы хотите, чтобы ваша кнопка динамически изменяла размер, это будет не так чисто.

  3. Иногда, когда вы вставляете <a> в div, только текст можно щелкнуть, эта настройка делает нажатой кнопку целиком.

  4. Вам не нужно иметь дело с формами, если вы просто пытаетесь перейти на другую страницу. Формы предназначены для ввода информации, и они должны быть зарезервированы для этого.

  5. Позволяет вам четко стилизовать стиль кнопок и стиль текста друг от друга (преимущество растяжки? Конечно, но CSS может выглядеть неприятно, поэтому приятно разложить его).

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


Если это внешний вид кнопки, которую вы ищете, в базовом теге привязки HTML, вы можете использовать платформу Twitter Bootstrap для форматирования любой из следующих распространенных ссылок / кнопок HTML-типа, которые будут отображаться в виде кнопки. Обратите внимание на визуальные различия между версиями 2, 3 или 4 структуры:

<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

Внешний вид бутстрапа (v4) :

Пример загрузки Bootstrap (v3) :

Внешний вид бутстрапа (v2) :


Есть ли недостатки, чтобы сделать что-то вроде следующего?

<a class='nostyle' href='http://www.google.com/'>
    <span class='button'>Schedule</span>
</a>

Где a.nostyle - это класс, который имеет стиль вашей ссылки (где вы можете избавиться от стандартного стиля ссылок), а span.button - это класс, который имеет стиль для вашей «кнопки» (фон, рамка, градиент и т. Д.). ,


Используйте его как data-href="index.html" внутри тега button .


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

Решение 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]

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

Плюсы:

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

Минусы:

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

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

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

<button onclick="window.location.href='/page2'">Continue</button>

Плюсы:

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

Минусы:

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

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

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

Плюсы:

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

Минусы:

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

Заключение

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

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

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


Начиная с HTML5, кнопки поддерживают атрибут formaction . Лучше всего, не требуется Javascript или обман.

<form>
  <button formaction="http://.com">Go to !</button>
</form>

Предостережения

  • Должен быть окружен тегами <form> .
  • Тип <button> должен быть «отправлен» (или не указан), я не мог заставить его работать с типом «кнопка». Это поднимает точку ниже.
  • Переопределяет действие по умолчанию в форме. Другими словами, если вы сделаете это в другой форме, это вызовет конфликт.

Ссылка: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction Поддержка браузера: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Browser_compatibility


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

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

Это, похоже, отлично работает для меня и не добавляет никаких ссылок на ссылку 20-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, чтобы перейти на secondary.html, URL был бы,

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

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

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

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


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


Что касается ответа BalusC ,

<form action="http://google.com">
    <input type="submit" value="Go to Google">
</form>

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


Это действительно очень просто и без использования каких-либо элементов формы. Вы можете просто использовать тег <a> с помощью кнопки внутри :).

Как это:

<a href="http://www.google.com" target="_parent"><button>Click me !</button></a>

И он загрузит href на ту же страницу. Хотите новую страницу? Просто используйте target="_blank" .


Для HTML 5 и стилизованная кнопка вместе с фоном изображения

<a id="Navigate" href="http://www.google.com">
  <input 
    type="button"
    id="NavigateButton"
    style="
      background-image: url(http://cdn3.blogsdna.com/wp-content/uploads/2010/03/Windows-Phone-7-Series-Icons-Pack.png);
      background-repeat: no-repeat;
      background-position: -272px -112px;
      cursor:pointer;
      height: 40px;
      width: 40px;
      border-radius: 26px;
      border-style: solid;
      border-color:#000;
      border-width: 3px;" title="Navigate"
    />
</a>


Если вы хотите, чтобы кнопка работала как кнопка загрузки

<a href="${link}" download><input type="button" id="btnDownload" value="Download Image"></input></a>


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

<a href="www.yourlink.com" class="btn btn-gradient"><i class="fa fa-home"> Button Text</i></a>

Если вы хотите перенаправить для страниц, которые находятся на вашем веб-сайте, то вот мой метод - я добавил атрибут href к кнопке, и onclick присвоил this.getAttribute ('href') для document.location.href

** Это не сработает, если вы ссылаетесь на URL-адреса своего домена из-за «X-Frame-Options» на «sameorigin».

Образец кода:

<button onclick="document.location.href=this.getAttribute('href');" href="/">Home</button>

<button onclick="location.href='http://www.example.com'" type="button">
     www.example.com</button>

<form>
    <input TYPE="button" VALUE="Home Page"
        onclick="window.location.href='http://www.wherever.com'"> 
</form>




htmlbutton