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


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

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

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



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

Есть и тег 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. Если слишком быстро убрать мышку, то элемент повиснет в "половинном" состоянии, например, ссылка будет прозрачна, но по ней можно делать переход.

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

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

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


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


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

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

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

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

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

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

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


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

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


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



<a href="#" class="button17" tabindex="0">кнопка</a>
<a href="#" class="button21">Заказать</a> <a href="#" class="button28">Установить</a>

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


<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

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

<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 второстепенные кнопки сначала плоские, а после наведения мышки обретают объём.

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


Источник: http://shpargalkablog.ru/2012/04/css-knopki.html


Как сделать кнопку на хтмл фото


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

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

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

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

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

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

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

Далее: