Дата обновления:

13.02.14

Простая HTML кнопка для сайта

Есть несколько типов input для создания кнопки и тег button [ type="button | reset | submit" ]. Внешне и функционально они абсолютно одинаковы.

button

<input type="button" value="input"/>
<button type="button">button</button>

Когда использовать тег button?

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

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

Из ссылки, тега span или div можно сделать с помощью CSS очень даже симпатичную кнопку.

Посмотреть описание

<a href="#" class="knopka">кнопка</a>

Создание кнопки: «А нужно ли изменять вид кнопки при наведении или делать кнопку с эффектом нажатия?»

Динамические эффекты реализуются благодаря псевдоклассам:

• :hover — при наведении. С появлением сенсорных экранов необходимость в :hover отпала. Для остальных же нужно как минимум изменение вида курсора мышки, чтобы дать понять, что элемент не является декорацией.
• :active — в момент нажатия кнопки. Когда на странице тут же что-то явно происходит, например, переход по ссылке, загрузка модального окна, появляется значок обработки формы, то :active можно опустить.
• :focus — пока кнопка в фокусе, то есть когда пользователь нажал на кнопку, но ещё не щёлкнул курсором мышки в другое место окна браузера. Без :focus невозможно объединить visibility: hidden; и transition. Если слишком быстро убрать мышку, то элемент повиснет в "половинном" состоянии, например, ссылка будет прозрачна, но по ней можно делать переход.

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

Код кнопки для сайта

Иногда самый простой внешний вид может выглядеть более стильно, чем навороченная с крутыми эффектами кнопка. Взгляните, как она тут [cssdeck.com] смотрится.

Добавить в корзину

<a href="#" class="button7">кнопка</a>

<a href="#" class="button7">кнопка</a>

Как у Сбербанка

<a href="#" class="button24">кнопка</a>

Кнопка с градиентом

Градиенты плохо поддаются анимации, плавной смене цвета фона. Что же делать? Ответ: box-shadow [перейдите по ссылке, там есть суперская форма входа].

Купить

<a href="#" class="button10">кнопка</a>

А вот всякие перемещения работают на ура.

Забронировать

<a href="#" class="button12" tabindex="0">кнопка</a>

Довольно популярно разделение кнопки на два цвета

Положить в корзину

<a href="#" class="button25">кнопка</a>

Красивые кнопки CSS

10 999 р.

<a href="#" class="button11">кнопка</a>

Как у Google

<a href="#" class="button15">кнопка</a>

<a href="#" class="button17" tabindex="0">кнопка</a>

Заказать

<a href="#" class="button21">Заказать</a>

<a href="#" class="button28">Установить</a>

Кнопки «Скачать» CSS

Скачать бесплатно первые 30 дней Автор

<a href="#" class="button13">Скачать
бесплатно первые 30 дней</a>

скачать

<a href="#" class="button14">Скачать</a>

Стилизация кнопок с помощью CSS

Анимированная кнопка: "свечение текста"

<input type="button" class="button4" value="Купить">

<input type="button" class="knopka01" value="запись">

Стиль кнопок с бликами

Глянцевая кнопка

<a href="#" class="button1">кнопка</a>

<a href="#" class="button9">кнопка</a>

Заказать билеты

<a href="#" class="knopka01">кнопка</a>

Кнопки меню

<a href="#" class="button5" data-twitter>twitter</a>

<a href="#" class="button16">кнопка</a>

<a href="#" class="button18" tabindex="0">кнопка</a>

<a href="#" class="button27">1</a>

Объёмная кнопка CSS

Объёмная

<a href="#" class="button19">кнопка</a>

кнопка Автор

<a href="#" class="button">кнопка</a>

сделать

заказ Автор

<a href="#" class="button20">Объёмная</a>

положить в корзину

<a href="#" class="button23">Объёмная</a>

Вдавленная кнопка

Оформить

<a href="#" class="button22">Заказать</a>

Выпуклая кнопка HTML

<a href="#" class="boxShadow4">Заказать</a>

Круглые CSS кнопки

<a href="#" class="button29"></a>

+

<a href="#" class="button30">+</a>

Анимированная кнопка CSS

Анимированное заполнение происходит так (тут нет лишнего кода, связанного с кнопкой). Другие интересные эффекты загрузки можно найти тут [tympanus.net].

<a href="#" class="button26" tabindex="0"><span></span></a>

<a href="#" class="button31" tabindex="0"></a>

3d кнопка CSS

<a href="#" class="button2" tabindex="0">кнопка</a>

Оформление кнопок

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

Кнопка с главным действием должна выделяться из общего содержания, быть контрастной. Тут главное не переусердствовать. Так, например, у интернет магазина e5 это приятно для глаза: А тут с оранжевым явный перебор, даже на изображении сложно остановить взгляд:

Именно поэтому у Google второстепенные кнопки сначала плоские, а после наведения мышки обретают объём.

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