Стиль кнопки CSS - эффект наведения кнопки - httpdoc.ru

Кнопки CSS

В этом руководстве по кнопкам CSS мы преобразуем тускло выглядящие кнопки HTML. С участием CSS , кнопку можно создать, применив различные свойства CSS. Это будет круто. Мы узнаем о классах кнопок Bootstrap, анимированных кнопках CSS, округленных кнопках CSS и так далее. Давайте начнем!

Различные свойства CSS, например CSS Padding , Маржа , Границы , Hover и т. Д. Можно использовать на Кнопка CSS . Эффективное и разумное использование этих свойств CSS приведет к созданию красивой и привлекательной для пользователя кнопки.

Базовый пример кнопок CSS

Пример
< ! DOCTYPE html > 
< html lang = "ru" > 
< head > 
  < title > Кнопки CSS < / title >  
  < meta charset = "UTF-8" >  
< style > 
 .button-style { 
  background-color : # 4CAF50 ; 
  граница : нет ; 
  цвет : белый ; 
  отступ : 15 пикселей 32 пикселей ; 
  выравнивание текста : центр ;
  текстовое оформление : нет ; 
  дисплей : встроенный блок ; 
  размер шрифта : 16 пикселей ; 
  маржа : 4px 2px ; 
  курсор : указатель ; 
  } 
< / style > 
< / head > 

< body > 
< h2 > Кнопки CSS < / h2 > 
< p > < button > Кнопка по умолчанию < / button > < / p > 
<р > < HREF = "#" класс = "кнопка-стиль" > Link Кнопка < / а > < / р > 
< р > < входной тип = "кнопка" класс = "кнопка-стиль" значение = "Input Button" > < / p > 
< button class = "button-style" > Кнопка CSS < / button > 

< / body > 
< / html >

Выход

Кнопки CSS

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


Объяснение используемых свойств CSS:

В приведенном выше примере для стилизации кнопок CSS используются различные свойства CSS. Различные свойства работали вместе, чтобы изменить форму, размер и стиль кнопок по умолчанию.

  • Изменить цвет кнопки CSS: background-color: color;
  • Примените простые границы кнопок: border: style;
  • Применить цвет к границам кнопки: граница: цвет стиля ширины;
  • Добавьте отступ для увеличения размера кнопки: padding: value;
  • Выровняйте текст кнопки по центру: text-align: center;

Круглые кнопки CSS

Круглые кнопки CSS - это те кнопки, в которых острые края кнопок превращены в круглые.

border-radius Свойство делает границы элемента круглой формы. Это свойство также может создать полностью закругленную кнопку, например идеальный круг. Добавьте border-radius:50%; , это приведет к появлению кнопки полного круга. Взгляните на пример, чтобы увидеть кнопки с закругленными углами CSS.

Пример
< ! DOCTYPE html > 
< html > 
< head > 
< meta name = "viewport" content = "width = device-width, initial-scale = 1" > 
< style > 
.button { 
  background-color : blueviolet ; 
  граница : нет ; 
  цвет : белый ; 
  отступ : 20 пикселей ; 
  выравнивание текста : центр ; 
  текстовое оформление : нет ;
  дисплей : встроенный блок ; 
  размер шрифта : 16 пикселей ; 
  маржа : 4px 2px ; 
  курсор : указатель ; 
} 

.button1 { радиус границы : 2px ; } 
.button2 { радиус границы : 4px ; } 
.button3 { радиус границы : 8 пикселей ; } 
.button4 { радиус границы : 12 пикселей ; } 
.button5 { радиус границы: 50% ; }
</ style>
</ head>
<body>

<h2>Кнопки соскругленными углами</ h2>
<p>Добавьте закругленные углы к кнопке с помощью свойства border-radius:</ p>

<buttonclass = "button button1" >2px</ button>
<buttonclass = "button button2" >4px</ button>
<= "button button3" > 8px < / button > 
< button class = "button button4" > 12px < / button > 
< button class = "button button5" > 50% < / button > 

< / body > 
< / html >

Выход

Закругленные кнопки

Добавьте закругленные углы к кнопке с помощью свойства border-radius:


CSS Buttons Hover Effect - Псевдо-класс

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

:hover Селектор используется для создания эффекта парения. Это псевдокласс, который работает в сочетании с другими селекторами. Псевдоклассы сами по себе не имеют значения, они должны объединяться с любым другим селектором для выполнения заданной им функции.

Посмотрите на пример эффектов наведения ниже. Проанализируйте использование псевдокласса : hover и внесите некоторые изменения самостоятельно, чтобы ознакомиться с ним.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Hover Buttons </title> 
  <meta charset="UTF-8"> 
<style>
button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
}

.green-btn {
    background-color: white; 
    color: black; 
    border: 2px solid #4CAF50;
}

.green-btn:hover {
    background-color: #4CAF50;
    color: white;
}

.blue-btn {
    background-color: white; 
    color: black; 
    border: 2px solid #008CBA;
}

.blue-btn:hover {
    background-color: #008CBA;
    color: white;
}

.red-btn {
    background-color: white; 
    color: black; 
    border: 2px solid #f44336;
}

.red-btn:hover {
    background-color: #f44336;
    color: white;
}

.gray-btn {
    background-color: white;
    color: black;
    border: 2px solid #e7e7e7;
}

.gray-btn:hover { background-color: #e7e7e7; }

.black-btn {
    background-color: white;
    color: black;
    border: 2px solid #555555;
}

.black-btn:hover {
    background-color: #555555;
    color: white;
}
</style>
</head>
<body>

<h2>Hoverable Buttons</h2>
<p>Use the :hover selector to change the style of the button when you move the mouse over it.</p>

 <button class="green-btn">Green</button>
 <button class="blue-btn">Blue</button>
 <button class="red-btn">Red</button>
 <button class="gray-btn">Gray</button>
 <button class="black-btn">Black</button>

</body>
</html>

Выход

CSS Hover Buttons

Классы кнопок начальной загрузки

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

Существуют различные кнопки начальной загрузки, которые вы можете использовать:

  • .btn
  • .btn-default
  • .btn-primary
  • .btn-success
  • .btn-info
  • .btn-warning
  • .btn-danger
  • .btn-link

Есть и другие классы для управления размером кнопки CSS. Мы расскажем об этом в руководстве по Bootstrap.

Шаги по использованию классов кнопок Bootstrap

  • Добавьте библиотеку Bootstrap на веб-страницу. Всю информацию вы получите на официальном сайте Bootstrap.
  • Создайте кнопку с помощью тега кнопки HTML. Вы также можете использовать эти классы с Anchor Tag и input tag .
  • Добавьте классы начальной загрузки на кнопки с помощью class атрибута.

Пример классов кнопок начальной загрузки


Пример
< ! DOCTYPE html > 
< html lang = "en" > 
< head > 
  < title > Пример кнопки начальной загрузки < / title > 
  < meta charset = "utf-8" > 
  < meta name = "viewport" content = "width = device- width, initial-scale = 1 " > 
  < link rel =" stylesheet " href =" https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css " > 
  <скрипт src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" >< / script > 
  < script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" >< / script > 
< / head > 
< body > 

< div class = "container" > 
  < h2 > Стили кнопок < / h2 > 
  < button type = "button" class = "btn" > Базовый < / button > 
  < button type = "button" class = "btn btn-default" > По умолчанию < / button > 
  < button type = "кнопка " class =" btn btn-primary "> Основной < / button > 
  < button type = "button" class = "btn btn-success" > Успех < / button > 
  < button type = "button" class = "btn btn-info" > Информация < / button > 
  < button type = "button" class = "btn btn-warning" > Предупреждение < / button > 
  < button type = "button"class = "btn btn-dangerous" > Опасно </ button > 
  < button type = "button" class = "btn btn-link" > Ссылка < / button >       
< / div > 

< / body > 
< / html >

Выход

Стили кнопок


Анимированные кнопки с CSS-анимацией

Кнопки CSS можно анимировать с помощью анимации CSS. Это действительно впечатляюще. Свойства анимации были введены в CSS3. Прямо сейчас вам не нужно беспокоиться о том, как делать анимацию с помощью CSS. Мы обсудим это подробно позже в руководстве.

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

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Animated Button </title> 
  <meta charset="UTF-8"> 
</head>  
<style>
button {
  display: inline-block;
  border-radius: 4px;
  background-color: green;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 10px;
  width: 150px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}
</style>
<body>

<h2>Animated Button</h2>

<button class="button"><span>Hover </span></button>

</body>
</html>

Выход

CSS Animated Button