Введение в основы современных css кнопок

Отключенные кнопки

Для ситуаций, когда кнопку надо отключить, делаем соответствующие стили:

<button class="button" disabled>Кнопка</button>
<button class="color red button" disabled>Кнопка</button>
<button class="color green button" disabled>Кнопка</button>
<button class="color blue button" disabled>Кнопка</button>

CSS

.button, .button:hover, .button:active{
  border-color: #eaeaea;
  background: #fafafa;
  cursor: default;
  position: static;
  color: #999;
  /* Следует избегать использования директивы !important, но в данном случае она необходима :) */
  box-shadow: none !important;
  text-shadow: none !important;
}

.green, .green:hover, .green:active{
  border-color: #57A957;
  background: #57A957;
  color: #D2FFD2;
}

.red, .red:hover, .red:active{
  border-color: #C43C35;
  background: #C43C35;
  color: #FFD3D3;
}

.blue, .blue:hover, .blue:active{
  border-color: #269CE9;
  background: #269CE9;
  color: #93D5FF;
}

Создание красивой кнопки для сайта

Html тег

Мы уже говорили, что сверстать красивую кнопку для сайта можно посредством html-тегов <input>, <a> и <button>. У них разная логика работы и набор атрибутов, поэтому и используются они для различных целей.

Чтобы оформить ссылочный тег <a> как кнопку, нужно просто дописать нужные стили в CSS. Разметка будет выглядеть примерно так:

<a class=»button» href=»http://example.com» target=»_blank»>Перейти на сайт</a>

Для кнопок, которые не просто перебрасывают пользователя на другую страницу, а что-либо делают (отправляют данные из формы, очищают заполненные поля, открывают попап, загружают файл и т. п.), лучше применять тег <button>:

<button class=»button»>Отправить</button>

У него есть необязательный атрибут type – тип кнопки, принимающий значения трёх типов:

type: button | submit | reset

Подробнее

В принципе, его можно не прописывать вообще. Но если это кнопка в форме, то по умолчанию браузер интерпретирует любой <button> как <button type=”submit”> и по клику отправляет данные из формы.

Есть мнение, что этот тег должен находиться непременно внутри тега <form>. Это не совсем так. Если вы хотите разместить на сайте красивую кнопку за пределами формы, данными из которой она оперирует, просто добавьте ей атрибут form с id вашей формы, и всё будет работать корректно.

Есть и другие атрибуты у <button>:

autofocus: установка фокуса на кнопку по умолчанию, как только загрузится страница;
disabled: блокировка кнопки (на неё нельзя нажать, она ничего не делает);
formaction (только в сочетании с типом submit): здесь прописывается URL обработчика данных из формы;
formenctype (тоже только для submit): описывает тип данных, которые будут пересылаться в обработчик – application/x-www-form-urlencoded, multipart/form-data или text/plain;
formmethod (только для submit): это HTTP-метод отправки данных. Принимает значения get/post;
formtarget (только для submit): окно или фрейм, где будет выведен результат (_self, _blank, _top, _parent либо name фрейма);
name: имя (необходимо для форм с несколькими кнопками, позволяет отслеживать, которая из них нажата);
value: значение (по сути, этот атрибут аналогичен name).

Теперь давайте попробует создать для сайта две красивые кнопки разного типа: ссылочную с тегом <a>, ведущую на страницу регистрации, и целевую с тегом <button>, открывающую модальное окно. Оформим их в одном стиле.

<span>Войти в кабинет</span>

</button>

<span>Зарегистрироваться</span>

</a>

Если вам нужна иконка внутри кнопки, реализуйте её вывод с помощью иконочного шрифта FontAwesome. Для самой кнопки выберите гарнитуру Roboto – она отлично подходит и для латинских, и для кириллических текстов.

@import url(‘https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css’);

@import url(‘https://fonts.googleapis.com/css?family=Roboto’);

.button {

/* Обнуляем стили по умолчанию */

border: none;

outline: none;

display: inline-block;

text-align: center;

text-decoration: none;

cursor: pointer;

font-size: 16px;

/* Используем кастомные и обычные шрифты */

font-family: Roboto, Verdana, Tahoma, sans-serif;

/* Экспериментируем с отступами и прочим */

padding: 12px 16px;

border-radius: 100px;

color: #fff;

}

.button i {

margin-right: 4px;

}

.button + .button {

margin-left: 6px;

}

.button.blue {

background: #2196F3;

}

.button.purple {

background: #9b59b6;

}

Добавляем кнопке живость – заставляем её реагировать на наведение мыши изменением цвета: при наведении она подсвечивается, при клике – как бы прогибается внутрь и темнеет.

.button:hover {

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);

}

.button:hover.blue {

background: #39a1f4;

}

.button:hover.purple {

background: #a66bbe;

}

.button:active {

box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);

text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);

}

.button:active.blue {

background: #0d8aee;

}

.button:active.purple {

background: #8f4bab;

}

На этом всё! Вы сделали две красивые кнопки для своего сайта.

Стилизация различных состояний

Основы html

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

У браузеров есть собственные дефолтные стили для состояний (фокус на кнопке) и (нажатие), но часть из них мы уже сбросили. Не забудем также про состояние (наведение курсора).

Для нажатой кнопки создадим олдскульный эффект «утопления» с небольшим изменением насыщенности.
При наведении курсора поменяем местами цвета фона и текста и добавим рамку.
Для обозначения фокусировки используем такой же стиль.

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

Только стилизованный :focus помогает им понять, где они находятся в данный момент.

Только после того как мы позаботились о собственном оформлении фокуса можно убрать у кнопки дефолтные браузерные стили ().

See the Pen Button states styling by FurryCat (@mohnatus-the-lessful) on CodePen.

Панель иконокЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полностраничныеВкладки при наведенииВерхняя навигацияОтзывчивый верхний навигаторНавигация с иконкамиМеню поискаСтрока поискаФиксированная боковая панельАнимированные боковые панелиОтзывчивая боковая панельПолноэкранная навигация наложенияМеню Off-CanvasБоковые кнопки навигацииБоковая панель с иконкамиМеню с горизонтальной прокруткойВертикальное менюНижняя навигацияОтзывчивая нижняя навигацияГраницы навигацииМеню по правому краюСсылка меню по центруМеню равной шириныФиксированное менюСкольжение вниз по полосе прокруткиСкрыть меню при прокруткеУменьшить меню при прокруткеЛипкая навигацияНавигация на изображенияВыпадающее менюВыпадающий при кликеВыпадающее меню в навигацииВыпадающий список в боковой навигацииОтзывчивая навигация с выпадающимПодменю навигацияВсплывающее менюМега менюМобильное менюМеню занавесСвернуть боковой барСвернуть боковую панельПагинацияХлебные крошкиГруппа кнопокГруппа вертикальных кнопокЛипкий социальный барНавигация таблеткиОтзывчивый заголовок

Сдвиг фонового изображения

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

Основной код CSS

Основная часть кода не отличается от предыдущих примеров

Обратите внимание на то, что мы используем фоновое изображение. Начальное положение фона установлено в «0 0»

При наведении курсора положение сдвигается по вертикали.

#button3 {
  background: #d11717 url('bkg-1.jpg');
  background-position: 0 0;
  text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3);
  font-size: 22px;
  height: 58px;
  width: 155px;
  margin: 50px 0 0 50px;
  overflow: hidden;
  display: block;
  text-align: center;
  line-height: 58px;
}

Эффекты CSS3

В данном примере нет ничего особенного — скругленные углы и тени.

  /*Скругленные углы*/
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  
  /*Тень*/
  -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

Анимация CSS

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

  /*Переход*/
  -webkit-transition: All 0.8s ease;
  -moz-transition: All 0.8s ease;
  -o-transition: All 0.8s ease;
  -ms-transition: All 0.8s ease;
  transition: All 0.8s ease;

Наведение курсора мыши

Теперь пришла пора сдвигать фоновое изображение. Начальное положение было «0 0». Устанавливаем второй параметр в значение 150px. Для сдвига по горизонтали требуется изменить первый параметр.

#button3:hover {
  background-position: 0px 150px;
}

Кернинг[править]

Вариант 4:

Кнопка button

.atuin-btn {
display: inline-flex;
margin: 10px;
text-decoration: none;
position: relative;
font-size: 20px;
line-height: 20px;
padding: 12px 30px;
color: #FFF;
font-weight: bold;
text-transform: uppercase;
font-family: ‘Roboto Condensed’, Тahoma, sans-serif;
background: #337AB7;
cursor: pointer;
border: 2px solid #BFE2FF;
}
.atuin-btn:hover,
.atuin-btn:active,
.atuin-btn:focus {
color: #FFF;
}
.atuin-btn:before,
.atuin-btn:after {
content: «»;
border: 4px solid transparent;
position: absolute;
width: 0;
height: 0;
box-sizing: content-box;
}
.atuin-btn:before {
top: -6px;
left: -6px;
}
.atuin-btn:after {
bottom: -6px;
right: -6px;
}
.atuin-btn:hover:before,
.atuin-btn:active:before,
.atuin-btn:focus:before {
width: calc(100% + 4px);
height: calc(100% + 4px);
border-top-color: #337AB7;
border-right-color: #337AB7;
transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
}
.atuin-btn:hover:after,
.atuin-btn:active:after,
.atuin-btn:focus:after {
width: calc(100% + 4px);
height: calc(100% + 4px);
border-bottom-color: #337AB7;
border-left-color: #337AB7;
transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

.atuin-btn {

displayinline-flex;

margin10px;

text-decorationnone;

positionrelative;

font-size20px;

line-height20px;

padding12px30px;

color#FFF;

font-weightbold;

text-transformuppercase;

font-family’Roboto Condensed’,Тahoma,sans-serif;

background#337AB7;

cursorpointer;

border2pxsolid#BFE2FF;

}
.atuin-btn:hover,
.atuin-btn:active,

.atuin-btn:focus {

color#FFF;

}
.atuin-btn:before,

.atuin-btn:after {

content»»;

border4pxsolidtransparent;

positionabsolute;

width;

height;

box-sizingcontent-box;

}

.atuin-btn:before {

top-6px;

left-6px;

}

.atuin-btn:after {

bottom-6px;

right-6px;

}
.atuin-btn:hover:before,
.atuin-btn:active:before,

.atuin-btn:focus:before {

widthcalc(100%+4px);

heightcalc(100%+4px);

border-top-color#337AB7;

border-right-color#337AB7;

transitionwidth0.2sease-out,height0.2sease-out0.2s;

}
.atuin-btn:hover:after,
.atuin-btn:active:after,

.atuin-btn:focus:after {

widthcalc(100%+4px);

heightcalc(100%+4px);

border-bottom-color#337AB7;

border-left-color#337AB7;

transitionborder-color0sease-out0.4s,width0.2sease-out0.4s,height0.2sease-out0.6s;

}

JavaScript код для переключателя

Изменение положение переключателя будем выполнять с помощью JavaScript. Для этого достаточно на страницу поместить следующий скрипт:

<script>
$('.switch-btn').click(function(){
    $(this).toggleClass('switch-on');
});
</script>

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

<script>
$('.switch-btn').click(function(){
    $(this).toggleClass('switch-on');
    if ($(this).hasClass('switch-on')) {
        $(this).trigger('on.switch');
    } else {
        $(this).trigger('off.switch');
    }
});
</script>

Событие on.switch будет возникать при перемещении ползунка переключателя в положение включено, а off.switch – в выключено.

Пример работы с событиями:

$('.switch-btn').on('on.switch', function(){
    console.log('Кнопка переключена в состояние on');
});
$('.switch-btn').on('off.switch', function(){
    console.log('Кнопка переключена в состояние off');
});

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

<script>
$(function(){
    $('.switch-btn').click(function (e, changeState) {
        if (changeState === undefined) {
            $(this).toggleClass('switch-on');
        }
        if ($(this).hasClass('switch-on')) {
            $(this).trigger('on.switch');
        } else {
            $(this).trigger('off.switch');
        }
    });

    $('.switch-btn').on('on.switch', function(){
        console.log('Кнопка переключена в состояние on');
    });
    
    $('.switch-btn').on('off.switch', function(){
        console.log('Кнопка переключена в состояние off');
    });

    $('.switch-btn').each(function(){
        $(this).triggerHandler('click', false);
    });
    
});
</script>

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

<!-- Два переключателя -->
<div class="switch-btn" data-id="#bl-1" style="margin: 10px;"></div>
<div class="switch-btn switch-on" data-id="#bl-2" style="margin: 10px;"></div>

<!-- Два элемента, первый переключатель управляет видимостью первого элемента, а второй - второго -->
<div id="bl-1" class="bl-hide" style="height: 20px; margin: 10px; background: orange;"></div>
<div id="bl-2" style="height: 20px; margin: 10px; background: lime;"></div>

...

<script>
    $(function () {
        $('.switch-btn').click(function () {
            $(this).toggleClass('switch-on');
            if ($(this).hasClass('switch-on')) {
                $(this).trigger('on.switch');
            } else {
                $(this).trigger('off.switch');
            }
        });
        $('.switch-btn').on('on.switch', function () {
            $($(this).attr('data-id')).removeClass('bl-hide');
        });
        $('.switch-btn').on('off.switch', function () {
            $($(this).attr('data-id')).addClass('bl-hide');
        });
    });
</script>

История дизайна кнопок для сайта с 2009 года по наши дни

Кнопки для сайтов призывают к действию (Call To Action), а также выступают в роли дизайнерского и навигационного элемента. Кнопки для веб-сайтов и приложений можно встретить повсюду – при входе в профили в соцсетях, при оформлении заказов в интернете, отправке сообщений через форму обратной связи и т. д.

Рекомендуемые статьи по данной теме:

Что такое лид-магнит и как его создать
СTА-элементы, которые привлекут в 2 раза больше клиентов
Разработка дизайна сайта: от выбора стиля до получения макета

Далее в статье вы увидите, каким был дизайн кнопок для сайтов и приложений почти 10 лет назад. Дизайнерские тренды постепенно менялись – вместе с ним менялся и дизайн кнопок для сайта. Мы собрали самые яркие примеры, начиная с 2009 года. Все скриншоты взяты из известной тематической социальной сети Dribbble, которая была запущена в том же 2009 году.

2009 год

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

2010 год

Именно в этом году появилась популярнейшая соцсеть Instagram. Изменения практически не коснулись формы кнопок веб-сайтов, однако в их дизайне появилось намного больше цветовых решений и разных элементов (например, внутренних теней). Что касается типографики на сайте, она стала более декоративной.

2011 год

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

2012 год

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

2013 год

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

2014 год

Произошел релиз популярного Material Design от Google, однако многие мастера не стали использовать этот стиль в полном объеме. Также 2014 год ознаменовался возникновением плоских и прозрачных вариантов кнопок для сайтов, двухпиксельных рамок и всевозможных цветов.

2015 год

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

2016 год

Дизайнеры хотят чего-то нового, а потому соединяют Flat и Material Design. Дизайн кнопок для сайта претерпевает изменения – появляются цветные тени и подсветки. При этом многие кнопки оформляют при помощи градиента, чтобы не выделять третье измерение, но подчеркивать при этом материал объектов.

2017 год

На дизайн кнопок для сайта в 2017 году существенно влияет минимализм. При этом веб-мастера все еще ищут новые формы. Строгие технологические лимиты отсутствуют. Ограничения на дизайн накладывают лишь тренды и модные веяния.

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

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

Вас также может заинтересовать: СTА-элементы, которые привлекут в 2 раза больше клиентов

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsCascading DropdownDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

Атрибуты тега button

Атрибут	Значения	Описание
autofocus	не указывается / autofocus	Логический атрибут. Если указан, при загрузке документа фокус будет переведен на кнопку.
disabled	не указывается / disabled	Логический атрибут. Если указан, делает кнопку неактивной (на кнопку нельзя будет нажать).
form	id формы	Указывает на форму, к которой относится кнопка. Используется, если кнопка применяется для отправки или очистки формы и при этом находится вне HTML кода формы. Если кнопка находится внутри тега <form>, то использовать атрибут form не нужно, кнопка по умолчанию привязана к форме, внутри которой находится.
formaction	URL	URL адрес документа — обработчика формы. Используется для кнопок с типом submit. Если указан, форма будет отправлена по URL адресу, указанному в этом атрибуте, игнорируя атрибут action тега <form>.
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	Способ кодирования информации. Используется для кнопок с типом submit. Указывает как именно нужно кодировать информацию при отправке на сервер, вызванной нажатием кнопки, содержащей этот атрибут. application/x-www-form-urlencoded — все символы кодируются перед отправкой в шестнадцатеричные значения (HEX) ASCII, пробелы заменяются на «+». Значение по умолчанию; multipart/form-data — символы не кодируются. Значение обязательно нужно использовать в форме с полем input type=»file» (при использовании файлов в форме); text/plain — символы не кодируются, пробелы заменяются символом «+». Атрибут используется только в случае отправки формы методом POST. Этот атрибут переопределяет значение, указанное в атрибуте enctype тега <form>.
formmethod	GETPOST	HTTP метод передачи данных формы. GET — передача данных в URL с помощью пар имя-значение (name-value). Значение по умолчанию. POST — передача данных в теле HTTP запроса. Используется только для кнопок с типом submit. Этот атрибут переопределяет значение, указанное в атрибуте method тега <form>.
formnovalidate	не указывается / formnovalidate	Этот атрибут переопределяет значение, указанное в атрибуте novalidate тега <form>.
formtarget	_blank_paren_self_topимя фрейма	Используется для кнопок с типом submit. Определяет где будет открыт результат обработки формы (ответ сервера), при отправке по нажатию кнопки с этим атрибутом: _blank — в новой вкладке или окне; _parent — в родительском окне; _self — в текущем окне (используется по умолчанию); _top — на весь экран. Этот атрибут переопределяет значение, указанное в атрибуте target тега <form>.
name	текст	Имя кнопки. Используется при передаче данных формы на сервер. Значение (value) кнопки будет передано в переменной, имеющей имя, указанное в этом атрибуте.
type	buttonresetsubmit	Тип кнопки. button — простая кликабельная кнопка, действие по нажатию которой определяется скриптом; reset — кнопка очистки полей формы. Стирает информацию введенную пользователем в поля связанной с кнопкой формы; submit — кнопка отправки формы. Выполняет отправку связанной формы на сервер. Значение этого атрибута по умолчанию может отличаться в разных браузерах. Для кроссбраузерности вашего кода всегда указывайте этот атрибут.
value	текст	Значение кнопки, которое будет отправлено на сервер. На сервер отправляется переменная, имеющая название, указанное в атрибуте name кнопки и значение, указанное в этом атрибуте. К форме может быть привязано несколько кнопок отправки. На сервер отправляются данные только той кнопки, которая вызвала событие отправки формы.

Menus

Full-width Buttons

To create a full-width button, add the w3-block class to the button.

Full-width buttons have a width of 100%, and spans the entire width of the parent element:

Button

Example

<button class=»w3-button w3-block»>Button</button>
<button class=»w3-button w3-block w3-teal»>Button</button>
<button class=»w3-button w3-block w3-red w3-left-align»>Button</button>
<button class=»w3-btn w3-block»>Button</button>
<button class=»w3-btn w3-block w3-teal»>Button</button>
<button class=»w3-btn w3-block w3-red w3-left-align»>Button</button>

Tip: Align the button text with the w3-left-align
class or the w3-right-align class.

The size of the a block can be defined using style=»width:».

Button
Button
Button

Example

<button class=»w3-button w3-block w3-black»
style=»width:30%»>Button</button>
<button class=»w3-button w3-block w3-teal» style=»width:50%»>Button</button>
<button class=»w3-button w3-block w3-red» style=»width:80%»>Button</button>

ФОРМЫ

Форма входаФорма регистрацииФорма оформления заказаКонтактная формаФорма входа в соц сетиРегистрацияФорма с иконкамиРассылка по почтеСложенная формаАдаптивная формаФорма всплывающаяФорма линейнаяОчистить поле вводаКопирование текста в буфер обменаАнимированный поискКнопка поискаПолноэкранный поискПоле ввода в менюФорма входа в менюПользовательский флажок/радиоПользовательский выборТумблер перключательУстановить флажокОпределить Caps LockКнопка запуска на EnterПроверка пароляПереключение видимости пароляМногоступенчатая формаФункция автозаполнения

Введение в основы современных css кнопок

Отключенные кнопки

CSS

Создание красивой кнопки для сайта

Стилизация различных состояний

МЕНЮ

Сдвиг фонового изображения

Основной код CSS

Эффекты CSS3

Анимация CSS

Наведение курсора мыши

Кернинг[править]

Вариант 4:

JavaScript код для переключателя

История дизайна кнопок для сайта с 2009 года по наши дни

Menus

МЕНЮ

Атрибуты тега button

Menus

Full-width Buttons

Example

Example

ФОРМЫ