Кнопки CSS — Использование Beautons
Библиотека кнопок Beautons – это простой CSS-инструментарий для создания кнопок. Это позволяет применять комбинации стилей, размеров для создания огромного набора последовательных, надежных и сплошных кнопок.
Загрузка Beautons
Чтобы загрузить библиотеку Beautons, загрузите css с github и вставьте следующую строку в раздел <head> веб-страницы.
<head> <link rel = "stylesheet" href = "beauton.min.css"> </head>
Использование кнопки
Создайте кнопку с помощью HTML-тега кнопки и добавьте стили btn.
Live Demo
<html> <head> <link rel = "stylesheet" href = "/css_buttons/beauton.min.css"> </head> <body> <button class = "btn"<Submit</button> </body> </html>
Это даст следующий результат –
Определение размера
Вы можете увеличить или уменьшить размер кнопки, определив ее размер с помощью CSS и используя ее вместе с именем класса, как показано ниже. В приведенном примере у нас есть изменения четырех размеров.
Live Demo
<html> <head> <link rel = "stylesheet" href = "/css_buttons/beauton.min.css"> </head> <body> <button class = "btn btn--small">Small</button> <br/> <br/> <button class = "btn btn--large btn-blue">Large</button><br/><br/> <button class = "btn btn--huge">Huge</button><br/><br/> <button class = "btn btn--full">Full</button><br/><br/> </body> </html>
Это даст следующий результат –
Определение размера шрифта
Вы можете увеличить или уменьшить размер кнопки, определив ее размер с помощью CSS и используя ее вместе с именем класса, как показано ниже. В приведенном примере у нас есть изменения четырех размеров.
Live Demo
<html> <head> <link rel = "stylesheet" href = "/css_buttons/beauton. min.css"> </head> <body> <button class = "btn btn--alpha">Huge</button><br/><br/> <button class = "btn btn--beta">Large</button><br/><br/> <button class = "btn btn--gamma">Regular</button><br/><br/> </body> </html>
Это даст следующий результат –
Определение функциональных кнопок
В следующем примере показаны различные функциональные кнопки.
Live Demo
<html> <head> <link rel = "stylesheet" href = "/css_buttons/beauton.min.css"> </head> <body> <button class = "btn btn--positive">Positive</button> <br/> <br/> <button class = "btn btn--negative">Negative</button><br/><br/> <button class = "btn btn--inactive">Disabled</button><br/><br/> <button class = "btn btn--soft">Rounded</button><br/><br/> <button class = "btn btn--hard">Hard</button><br/><br/> </body> </html>
Это даст следующий результат –
Объединение стилей
В следующем примере показано, как комбинировать стили кнопок.
Live Demo
<html> <head> <link rel = "stylesheet" href = "/css_buttons/beauton.min.css"> </head> <body> <button class = "btn btn--large btn--positive">Button</button> <br/><br/> <button class = "btn btn--positive btn--alpha btn--small">Button</button><br/><br/> <button class = "btn btn--negative btn--full btn--soft">Button</button><br/><br/> <p>A <button class = "btn btn--natural">button</button> in a paragraph.</p><br/><br/> </body> </html>
Это даст следующий результат –
A in a paragraph.
CSS3 кнопки в стиле FLAT
07 июня2016
Категория: Готовые CSS3 кнопки
Очередная подборка CSS3 кнопок в очень популярном на сегодняшнее время стиле FLAT. Данный минималистичный стиль веб-дизайна выражает максимальную простоту, утончённость и лаконичность одновременно. В его основу ложится двумерный стиль, который веб-дизайнеры называют «плоским дизайном» (собственно говоря, слово FLAT так и переводится с английского — «плоский»)
Примеры FLAT кнопок
Рассмотрим несколько вариантов реализации FLAT кнопки, используя чистый CSS.
Пример №1
Красная flat кнопка Зеленая flat кнопка Синяя flat кнопка
Пример №2
Бирюзовая flat кнопка Темно-фиолетовая flat кнопка
Пример №3
Оранжевая flat кнопка Серая flat кнопка
HTML разметка FLAT кнопок
HTML разметка у всех кнопок максимальна проста и практически одинакова, изменяются лишь классы, определяющие оформление кнопки.
/*Пример №1*/ <a href="#">Красная flat кнопка</a> /*Пример №2*/ <a href="#">Бирюзовая flat кнопка</a> /*Пример №3*/ <a href="#">Оранжевая 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; //размер и цвет рамки/обводки кнопки при нажатии }
Закрепленные
Понравившиеся
кнопок | Primer CSS
- Stable
- Доступность не проверена
- Источник
На этой странице
действия , как и в формах, а текстовые гиперссылки используются для направлений , или переход с одной страницы на другую.
Примечание. При использовании элемента
всегда указывайте тип
.
Типы кнопок
По умолчанию
Используйте стандартные — но стильные — . btn
для действий формы и общих действий страницы. Они широко используются на сайте.
Основные
Основные кнопки зеленого цвета и используются для обозначения основного действия на странице. Если вам нужно, чтобы ваши кнопки выделялись, используйте .btn.btn-primary
. Вы можете использовать его с кнопками обоих размеров — просто добавьте .btn-primary
.
Outline
Кнопки Outline преуменьшают действие, поскольку они выглядят как прямоугольные ссылки. Просто добавьте .btn-outline
и вперед.
Опасность
Кнопки опасности красные. Они помогают повторить, что предполагаемое действие важно или потенциально опасно (например, удаление репо или передача права собственности). Аналогично основным кнопкам, просто добавьте .btn-опасность
.
Selected
Добавление атрибута aria-selected="true"
приведет к держать кнопку в выбранном состоянии. Обычно используется для BtnGroups
.
Отключено
Отключено
и
элементов с атрибутом aria-disabled="true"
.
Варианты кнопок
Размеры
Далее к размеру по умолчанию есть еще .btn-sm
(маленький) и .btn-большой 9вариант 0031. Используйте их, чтобы уменьшить или увеличить размер кнопки. Это полезно для размещения кнопки рядом с входом или превращения кнопки в заметный призыв к действию в основных разделах.
Утилиты масштабирования шрифта можно использовать для изменения размера шрифта, если это необходимо. Отступы применяются в em так, чтобы они масштабировались пропорционально размеру шрифта.
Использование .btn-large
с утилитой масштабирования шрифта для преобразования текста в больший размер.