sonyps4.ru

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

  • Tutorial





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


Для кого эта статья?

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


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


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


СсылкиВведение Ссылка которая кнопка



CSSДля наглядности - мой вариант велосипеда который выглядит странновато, но для примера сойдёт.

Обычная, наведение, клик, отключена соответственно.button - обычное состояние button { background: none; outline: none; border: none; text-transform: uppercase; } button:hover , button:focus - при наведении button:hover, button:focus { color: hsla(108, 12%, 0%, 1); box-shadow: -1px 1px 2px hsla(108, 62%, 42%, 1); background-color: hsla(108, 62%, 92%, 1) } button:active - в момент клика button:active { color: hsla(108, 42%, 32%, 1); box-shadow: -2px 4px 8px hsla(64, 64%, 42%, 1); background-color: hsla(64, 64%, 92%, 1); } button:disable - отключена button:disabled { color: hsla(0, 0%, 64%, 1); background: none; box-shadow: none; opacity: 1; } Пример посложнее


Показать CSS

button { margin: .8rem; font-size: 1.42rem; padding: 1rem; background: hsla(180, 90%, 64%, 1); color: hsla(180, 90%, 12%, 1); text-shadow: 1px 1px 1px hsla(180, 90%, 32%, 1); box-shadow: -4px 4px 0 0 hsla(180, 90%, 22%, .87), -3px 4px 3px hsla(180, 42%, 11%, 1), 1px 5px 4px hsla(180, 42%, 11%, 1), -4px 1px 0 0 hsla(180, 90%, 32%, 1), inset 0 0 1px 0 hsla(180, 90%, 90%, 1); border: 1px hsla(180, 92%, 56%, 1) solid; border-top-color: hsla(180, 92%, 64%, 1); border-radius: 5px; outline: none; position: relative; transition: all .22s ease-in; } button:hover { background: hsla(420, 90%, 42%, 1); color: hsla(420, 90%, 12%, 1); text-shadow: 1px 1px 1px hsla(420, 90%, 32%, 1); border: 1px hsla(420, 92%, 56%, 1) solid; border-top-color: hsla(420, 90%, 64%, 1); box-shadow: -4px 4px 0 0 hsla(420, 90%, 22%, .87), -3px 4px 3px hsla(420, 42%, 11%, 1), 1px 5px 4px hsla(420, 42%, 11%, 1), -4px 1px 0 0 hsla(420, 90%, 32%, 1), inset 0 0 1px 0 hsla(420, 90%, 90%, 1); } button:focus { background: hsla(108, 90%, 42%, 1); color: hsla(108, 90%, 12%, 1); text-shadow: 1px 1px 1px hsla(108, 90%, 32%, 1); border: 1px hsla(108, 92%, 56%, 1) solid; border-top-color: hsla(108, 90%, 64%, 1); box-shadow: -4px 4px 0 0 hsla(108, 90%, 22%, .87), -3px 4px 3px hsla(108, 42%, 11%, 1), 1px 5px 4px hsla(108, 42%, 11%, 1), -4px 1px 0 0 hsla(108, 90%, 32%, 1), inset 0 0 1px 0 hsla(108, 90%, 90%, 1); } button:active { background: hsla(420, 90%, 42%, 1); color: hsla(420, 90%, 12%, 1); text-shadow: 1px 1px 1px hsla(420, 90%, 32%, 1); transform: translate(-4px, 4px); border: 1px hsla(420, 92%, 22%, 1) solid; border-top-color: hsla(420, 92%, 56%, 1); box-shadow: 0 0 0 0 hsla(420, 90%, 22%, .87), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 0 hsla(420, 90%, 32%, 1), inset 1px 1px 4px 0 hsla(420, 90%, 22%, 1); } button:disabled { background: hsla(420, 0%, 64%, 1); color: hsla(420, 0%, 12%, 1); text-shadow: 1px 1px 1px hsla(420, 0%, 32%, 1); transform: translate(-4px, 4px); border: 1px hsla(420, 0%, 22%, 1) solid; border-top-color: hsla(420, 0%, 56%, 1); box-shadow: 0 0 0 0 hsla(420, 0%, 22%, .87), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 0 hsla(420, 0%, 32%, 1), inset 1px 1px 4px 0 hsla(420, 0%, 22%, 1); } button:disabled.in_ajax { background: hsla(108, 22%, 64%, 1); color: hsla(108, 22%, 12%, 1); text-shadow: 1px 1px 1px hsla(108, 22%, 32%, 1); transform: translate(-4px, 4px); border: 1px hsla(108, 22%, 22%, 1) solid; border-top-color: hsla(108, 22%, 56%, 1); box-shadow: 0 0 0 0 hsla(108, 22%, 22%, .87), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 0 hsla(420, 0%, 32%, 1), inset 1px 1px 4px 0 hsla(420, 0%, 22%, 1); }

ДизайнеруТы цээсэсов можешь и не знать, но состояния отрисовать обязан !

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





Спасибо

Спасибо, что дочитали. Всё здесь написаннное не является 100% истиной в последней инстанции.
Репозиторий

GitHub

Ссылка на репозиторий этой статьи . Если хотите дополнить или исправить, присылайте пожалуйста Pull Request


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

Существует два подхода к созданию кнопки на сайте в виде ссылки. Рассмотрим подробно каждый из них.

1. Кнопка в виде изображения

Это самый простой подход к созданию кнопки в виде ссылки на сайте. Для этого Вам понадобится всего лишь найти подходящую картинку для кнопки. Например, картинка с Вашей кнопкой называется button.jpg . Тогда, для создания ссылки код должен быть следующим:

... ...

Вот во что он превращается на странице сайта:

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

Кстати, для создания изображений для кнопок есть специальный сайт: http://dabuttonfactory.com/ . Здесь можно бесплатно создать кнопку по Вашему вкусу (задать стиль, выбрать изображение, написать подходящий текст и т.п.).

2. Кнопка с помощью HTML тега

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

... ...

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

Вместо URL1 и URL2 надо написать адреса страниц, куда необходимо осуществить переход. Если Вы хотите, чтобы ссылки открывались в новых вкладках (аналог атрибута target="_blank" у тега a), то вместо onclick="javascript:window.location="..."" нужно прописать onclick="javascript:window.open="..."" (заменить location на open).

Я почти уверен, что Вам захочется оформить кнопку как-то по другому (под дизайн своего сайта). Для этого введем класс btn:

.btn { //Задание общего стиля для кнопки height :30px ; border-color :#c2e254 #9bb838 #9bb838 #c2e254 ; border-style :solid ; border-width :1px ; background :#c2e254 ; cursor :pointer ; } .btn:hover { //Стиль кнопки при новедении на него курсора border-color :#FFCC66 #FFFF99 #FFFF99 #FFCC66 ; border-style :solid ; border-width :1px ; background :#FFFF99 ; } .btn:focus { //Стиль кнопки, когда она в фокусе background :#ddd ; border-color :#ddd #333 #333 #ddd ; border-style :solid ; border-width :1px ; } .btn:active { //Стиль кнопки при нажатии background :#ff0000 ; border-color :#ddd #333 #333 #ddd ; border-style :solid ; border-width :1px ; }

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

Почти все люди (некоторые больше, некоторые – меньше) любят порядок, потому что порядок – это всегда удобно. Удобно, когда у человека порядок на рабочем столе, на работе, в квартире. И очень удобно, когда заходишь на незнакомый сайт, а там тоже – порядок, всё легко и просто.

Обычно такой порядок называется дружественным (интуитивно понятным) интерфейсом. Html кнопка – это просто незаменимое средство для наведения порядка на сайте и организации дружественного интерфейса.

Как сделать кнопку в HTML?

Кнопки для сайта HTML создаются одним из двух способов:

1. С помощью тега input . Синтаксис такой команды выглядит следующим образом:

2. С помощью тега button :

Надпись на кнопке Пример кода, который выполняет создание кнопки в html сразу двумя этими способами: Кнопка

Кнопочка2

В результате получаются две одинаковые кнопки:

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

Разница между двумя методами состоит лишь в том, что при использовании тега button – вы можете поместить в контейнер свой набор в виде картинки и текста, и это все будет активно, а при использовании тега input возможно будет использовать либо только картинку, либо только текст.

Но при этом старые версии браузера Internet Explorer могут неправильно отображать современный тег button .

Виды кнопок html 1. Кнопка-ссылка HTML

Кнопка со ссылкой HTML (например, кнопка наверх для сайта html или кнопка назад html ) может быть создана с помощью ссылок «якорей ». Обычный «якорь » имеет следующий вид:

Такой «якорь » невидим и может быть поставлен в любом месте, в котором вы считаете нужным. Для того чтобы перейти к «якорю », используется следующая команда:

название кнопки

Нажатие на название кнопки, моментально переводит курсор к «якорю ».
Допустим, нам нужно, чтобы внизу сайта стояла кнопка перехода на начало, а в начале – для перехода вниз:

Якорь

вниз

вверх

Выглядит это следующим образом:


2. Кнопка Submit

Кнопки типа Submit существуют для отправки информации, введённой посетителем сайта, на сервер. Например, простейшая организация ввода пароля выглядит так:

3. Кнопка Reset

Кнопки типа Reset предназначены для обновления данных форм (возврата их в первоначальное состояние). Для того чтобы создать такую кнопку, следует использовать следующий код:

4. HTML кнопка с картинкой

В HTML кнопки можно украшать какими-либо картинками. Для этого достаточно использовать следующий код:

Кнопка с картинкой и текстом:

Например:


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

Хорошо Плохо

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

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

Кнопка html в меню сайта в стиле дизайна

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

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

Кнопка, по своей сути является той же самой ссылкой, только имеющей приятный вид и, если требуется, меняющей оттенки или форму при клике или наведении на нее.

Сделать кнопку можно двумя способами: самому или используя сервисы для создания кнопок.

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

Кнопки html для сайта - это не столько сложная работа по созданию, сколько трудоемкое оживление кнопки. Под словом «оживление» подразумевается сделать ее реагирующей на клик, наведение или изменить в момент нажатия, для чего нужно использовать CSS или JavaScript.

Кнопка с использованием изображения

Простая кнопка html имеет и создается путем вставки тега "a" (ссылки) на (изображение).

Указанный пример, по сути, является простой картинкой-ссылкой, однако может иметь любой вид и отлично вписываться в дизайн, однако данная кнопка html не может «работать», то есть менять вид в различных ситуациях.

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

Кнопки для сайта с применением CSS

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

Код кнопки для сайта html будет иметь вид:



Загрузка...