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

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

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

<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>

Как у Mozilla


<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>

twitter ВКонтакте Facebook

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

Пушкин Некрасов Есенин

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

Ломоносов М.В.Лобачевский Н.И.Ковалевская С.В.

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

1 2 3

<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 это приятно для глаза: кнопка магазина e5 А тут с оранжевым явный перебор, даже на изображении сложно остановить взгляд: кнопки магазина e5

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

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


Закрыть ... [X]

Css - Как сделать срезанные углы у кнопки (градиент)? - Stack Overflow Мастер класс по прическам с лентой

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