Очередная подборка CSS3 кнопок в очень популярном на сегодняшнее время стиле FLAT. Данный минималистичный стиль веб-дизайна выражает максимальную простоту, утончённость и лаконичность одновременно. В его основу ложится двумерный стиль, который веб-дизайнеры называют "плоским дизайном" (собственно говоря, слово FLAT так и переводится с английского - "плоский")
Примеры FLAT кнопок
Рассмотрим несколько вариантов реализации FLAT кнопки, используя чистый CSS.
Пример №1
Красная flat кнопка Зеленая flat кнопка Синяя flat кнопка
Пример №2
Бирюзовая flat кнопка Темно-фиолетовая flat кнопка
Пример №3
Оранжевая flat кнопка Серая flat кнопка
HTML разметка FLAT кнопок
HTML разметка у всех кнопок максимальна проста и практически одинакова, изменяются лишь классы, определяющие оформление кнопки.
/*Пример №1*/ <a href="#" class="flat1">Красная flat кнопка</a> /*Пример №2*/ <a href="#" class="flat2">Бирюзовая flat кнопка</a> /*Пример №3*/ <a href="#" class="flat3">Оранжевая flat кнопка</a>
CSS стили FLAT кнопок
Рассмотрим CSS стили каждого первого варианта кнопки из всех трех примеров.
CSS стили первого примера
.flat1 {
padding: 15px 24px; //отступы, отвечающие за размеры кнопки (в пикселях)
font: normal 15px/22px Verdana; //тип, размер, межстрочный интервал и вид шрифта
text-transform: uppercase; //преобразование текста в заглавные символы
-webkit-user-select: none;
border: none;
text-align: center; //текст кнопки по центру
outline: none;
cursor: pointer;
color: #fff; //цвет текста кнопки в статичном виде
background-color: #f35958; //цвет кнопки в статичном виде
display: inline-block;
/*Тени кнопки в статичном виде*/
-webkit-box-shadow: 0px 3px 0px #c24746;
-moz-box-shadow: 0px 3px 0px #c24746;
box-shadow: 0px 3px 0px #c24746;
}
.flat1:hover {
background-color: #e65453; //цвет кнопки при наведении
color: #fff; //цвет текста кнопки при наведении
border: none;
}
.flat1:active {
/*Тени кнопки при нажатии*/
-webkit-box-shadow: 0px 1px 0px #f35958;
-moz-box-shadow: 0px 1px 0px #f35958;
box-shadow: 0px 1px 0px #f35958;
position: relative;
top: 2px;
background-color: #e65453; //цвет кнопки при нажатии
color: #fff; //цвет текста кнопки при нажатии
}
CSS стили второго примера
.flat2 {
padding: 15px 24px; //отступы, отвечающие за размеры кнопки (в пикселях)
font: normal 15px/22px Verdana; //тип, размер, межстрочный интервал и вид шрифта
text-transform: uppercase; //преобразование текста в заглавные символы
border: none;
color: #fff; //цвет текста кнопки в статичном виде
background-color: #1ABC9C; //цвет кнопки в статичном виде
-webkit-transition:border .25s linear, color .25s linear,background-color .25s linear;
transition:border .25s linear, color .25s linear,background-color .25s linear;
-webkit-font-smoothing: subpixel-antialiased;
text-align: center; //текст кнопки по центру
cursor: pointer;
-webkit-user-select: none;
display: inline-block;
}
.flat2:hover {
color: #fff; //цвет текста кнопки при наведении
background-color: #20D5B1; //цвет кнопки при наведении
border: none;
}
.flat2:active {
color: #fff; //цвет текста кнопки при нажатии
background-color: #179B81; //цвет кнопки при нажатии
border: none;
}
CSS стили третьего примера
.flat-type3 {
padding: 15px 24px; //отступы, отвечающие за размеры кнопки (в пикселях)
font: normal 15px/22px Verdana; //тип, размер, межстрочный интервал и вид шрифта
text-transform: uppercase; //преобразование текста в заглавные символы
color: #E57332; //цвет текста кнопки в статичном виде
border: 2px solid #E57332; //размер и цвет рамки/обводки кнопки в статичном виде
border-radius: 5px; //скругление углов кнопки (в пикселях)
background-color: #fff; //цвет кнопки в статичном виде
-webkit-transition:border .25s linear, color .25s linear,background-color .25s linear;
transition:border .25s linear, color .25s linear,background-color .25s linear;
-webkit-font-smoothing: subpixel-antialiased;
text-align: center; //текст кнопки по центру
cursor: pointer;
-webkit-user-select: none;
display: inline-block;
}
.flat3:hover {
color: #fff; //цвет текста кнопки при наведении
background-color: #E57332; //цвет кнопки при наведении
border: 2px solid #E57332; //размер и цвет рамки/обводки кнопки при наведении
}
.flat3:active {
color: #fff; //цвет текста кнопки при нажатии
background-color: #FF813A; //цвет кнопки при нажатии
border: 2px solid #FF813A; //размер и цвет рамки/обводки кнопки при нажатии
}
Комментарии