Оглавление:
- 1 Кнопки | CSS
- 1.1 Простая HTML кнопка для сайта
- 1.2 Как сделать кнопку на CSS
- 1.3 Код кнопки для сайта
- 1.4 Кнопка с градиентом
- 1.5 Красивые кнопки CSS
- 1.6 Кнопки «Скачать» CSS
- 1.7 Стилизация кнопок с помощью CSS
- 1.8 Стиль кнопок с бликами
- 1.9 Кнопки меню
- 1.10 Объёмная кнопка CSS
- 1.11 Вдавленная кнопка
- 1.12 Выпуклая кнопка HTML
- 1.13 Круглые CSS кнопки
- 1.14 Анимированная кнопка CSS
- 1.15 3d кнопка CSS
- 1.16 Оформление кнопок
Кнопки | CSS
- Дополняющие тему статьи:
- CSS кнопка вверх
- Крупные кнопки-изображения
- зафиксировать панель
Простая 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
<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
Скачать бесплатно первые 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 второстепенные кнопки сначала плоские, а после наведения мышки обретают объём.
Также нужно победить желание сделать кнопку величиной со слона, чтобы не стать объектом баннерной слепоты.
http://shpargalkablog.ru/2012/04/css-knopki.html#on
- Автоматическое монтирование fstab и systemd - 24.02.2021
- Как в Linux подключить новый диск, разметить и отформатировать разделы - 24.02.2021
- Как сменить режим работы PHP - 24.02.2021