Стили для кнопок css: Buttons Основные стили кнопок CSS уроки для начинающих академия

Кнопки 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 .

<дел>
<дел>

Отключено

Отключено

Варианты кнопок

Размеры

Далее к размеру по умолчанию есть еще .btn-sm (маленький) и .btn-большой 9вариант 0031. Используйте их, чтобы уменьшить или увеличить размер кнопки. Это полезно для размещения кнопки рядом с входом или превращения кнопки в заметный призыв к действию в основных разделах.

Утилиты масштабирования шрифта можно использовать для изменения размера шрифта, если это необходимо. Отступы применяются в em так, чтобы они масштабировались пропорционально размеру шрифта.

Использование .btn-large с утилитой масштабирования шрифта для преобразования текста в больший размер.

<дел>
Большая кнопка со ссылкой

Блок button

Сделайте любую кнопку полной ширины, добавив .btn-block . Он добавляет ширину : 100%; изменяет отображение с inline-block на block и центрирует текст кнопки.

Кнопка ссылки

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

Невидимая кнопка

Когда вам нужна ссылка, но вы хотите он дополнен, а линия увеличена, как кнопка, которая лучше всего подходит для действий «отмены» в формах.

Кнопка скрытого текста

Используйте . hidden-text-expander для указания и переключения скрытого текста.

<диапазон>

Вы также можете сделать расширитель встроенным добавив .встроенный .

Кнопка с иконками

Иконки можно добавить к любой кнопке.

<тип кнопки="кнопка"> <тип кнопки="кнопка"> 75а.75.75 0 00-1.5 0v6.69L4.78 5.97a.75.75 0 00-1.06 1.06l3.75 3.75zM3.75 13a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5z»> Клонировать <промежуток> <тип кнопки="кнопка"> Удалить <тип кнопки="кнопка"> 25-.25в-7.5а.25.25 0 01.25-.25зМ14.25 1х2.75А1.75 1.75 0 000 2.75в7.5С0 11.216 .784 12 1.75 12х4.727с-.1 1.041-.52 1.872-1.292 2.757А.75.75 0 004.75 16х6.5а.75.75 0 00.565-1.243с-.772-.885-1.193-1.716-1.292-2.757х4.727А1.75 1.75 0 0016 10.25в-7.5 А1,75 1,75 0 0014,25 1zM9 .018 12H6.982a5.72 5.72 0 01-.765 2.5h4.566a5.72 5.72 0 01-.765-2.5z»> Открыть на рабочем столе

Кнопка только со значками

Кнопки только со значками .btn-octicon становятся синими при наведении. Используйте .btn-octicon -danger , чтобы при наведении значок стал красным.0011

Кнопка закрытия 900 46

Когда используя значок octicon-x для кнопки закрытия, добавьте . close-button , чтобы удалить стили кнопок по умолчанию.

кнопкой

Вы можете легко добавить счетчик к маленькой кнопке . Добавьте класс .btn-with-count к .btn-sm , а затем добавьте . social-count после кнопки. Обязательно очистите число с плавающей запятой, добавленное дополнительным классом

Вы также можете использовать компонент счетчика внутри кнопок :

<тип кнопки="кнопка"> Кнопка 12 <тип кнопки="кнопка"> Кнопка 12 <тип кнопки="кнопка"> Кнопка 12 <тип кнопки="кнопка"> Кнопка 12

Редактировать эту страницу на GitHub 10

участников

Последний раз редактировалось simurai

на

16 декабря 2022 г.

html — стили кнопок CSS

стили кнопок сс.

Я понимаю код .button пожалуйста, опишите мне приведенный выше код, который я округлил красной рамкой.

Некоторая помощь от тех, кто знает о html и css

  • html
  • css
  • наведение
2

Итак, вы видите различные виды селекторов для CSS.

Это способ нацеливания на различные части вашего HTML.

Первый пример

 .button span {
  ...
}
 

Возможно, это наиболее распространенное использование селекторов, называемых «потомками». .button span «означает» HTML с классом «кнопка» и имеет потомка span элемент Таким образом, это будет выглядеть так:

 .button span {
  красный цвет
} 
 <кнопка>
  Текст кнопки

<кнопка>
  Какой-то текст
  
Я красный <кнопка> Какой-то текст Я не красный

Второй пример

. button span:after использует вышеупомянутый селектор потомков, но также комбинирует его с селектором «и»… это часть span:after !

Любые селекторы, записанные с : перед ними, называются « псевдоэлементов «. Они могут быть из событий мыши (например, :hover ), или они могут быть такими вещами, как псевдоэлементы :before или :after .

 .button span:hover {
  красный цвет;
} 
 <кнопка>
  Текст кнопки

<кнопка>
  Я красный, когда вы наводите на меня курсор
  
Но я никогда не буду красным, когда ты наведешь курсор <кнопка> Я не красный, когда вы наводите курсор мыши <дел> Я буду красным, когда вы наведете на меня курсор

CSS может быть сложным, это огромный мир! Обязательно ознакомьтесь с документацией MDN или W3Schools, так как у них есть действительно хорошие интерактивные примеры.