Перейти к регистрации

Мы используем куки-файлы (cookie), чтобы обеспечить вам наилучшую работу на нашем веб-сайте и проанализровать его использование. Вы можете найти больше информации о файлах cookie и о том, как мы их используем в нашей политике конфиденциальности. Продолжая использовать этот сайт, Вы даёте согласие на использование файлов cookie. Узнать больше

← Назад

Стили кнопок CSS

Стили кнопок CSS

Пример 1

Кнопка с анимацией "нажатия" при наведении

Кнопка

Настройки CSS

.btn-new {
border: none;
border-radius: 10px;
text-decoration: none;
color: white;
background: #0B63F6;
box-shadow: 0 5px 0 #003CC5;
}

.btn-new:hover {
background: #003CC5;
box-shadow: none;
position: relative;
top: 5px;
}

Создайте сайт

с помощью нейросети

Ответьте всего на 2 вопроса и получите готовый сайт для вашей сферы деятельности

Сгенерировать сайт

Пример 2

Кнопка с появляющейся границей

Кнопка

Настройки CSS

.btn-new {
border-radius: 10px;
color: white;
transition: .2s linear;
background: #0B63F6;
}

.btn-new:hover {
box-shadow: 0 0 0 2px white, 0 0 0 4px #3C82F8;
}

Пример 3

Выдвигающаяся анимированная кнопка

Кнопка

Настройки CSS

.btn-new {
border-radius: 10px;
color: white;
transition: .2s linear;
background: #0B63F6;
position: relative;
top: 0;
left: 0;
}

.btn-new:hover {
box-shadow: 2px 2px white, 4px 4px #FC63B5;
top: -4px;
left: -4px;
}

Пример 4

Кнопка с анимированной нижней границей

Кнопка

Настройки CSS

.btn-new {
border-radius: 0px;
color: white;
transition: .2s linear;
background: #0B63F6;
}

.btn-new:hover {
box-shadow:0px -6px 0 #003CC5 inset;
}

Пример 5

Кнопка с анимированным затемнением

Кнопка

Настройки CSS

.btn-new {
  border-radius: 10px;
  color: white;
  transition: .2s linear;
  background: #0B63F6;
}

.btn-new:hover {
box-shadow: #003CC5 0 0px 0px 40px inset;
}

Создайте сайт

с помощью нейросети

Ответьте всего на 2 вопроса и получите готовый сайт для вашей сферы деятельности

Сгенерировать сайт

Пример 6

Кнопка с анимированным градиентом

Кнопка

Настройки CSS

.btn-new {
text-align: center;
transition: 0.5s;
background-size: 200% auto;
color: white;
box-shadow: 0 0 20px #eee;
border-radius: 10px;
background-image: linear-gradient(to right, #003CC5 0%, #0B63F6 51%, #003CC5 100%);
}

.btn-new:hover {
background-position: right center;
}

Пример 7

Кнопка с поворотом при наведении

Кнопка

Настройки CSS

.btn-new {
  border-radius: 10px;
  color: white;
  transition: .2s linear;
background: #0B63F6;
}

.btn-new:hover {
  -webkit-transform: rotateZ(5deg);
-ms-transform: rotateZ(5deg);
  transform: rotateZ(5deg);
}

Пример 8

Кнопка с анимированным бликом

Кнопка

Настройки CSS

@keyframes slideme {
0% {
left: -30px;
margin-left: 0px;
}
30% {
left: 110%;
margin-left: 80px;
}
100% {
left: 110%;
margin-left: 80px;
}
}

.btn-new {
overflow: hidden;
position: relative;
}

.btn-new:after {
content: "";
display: block;
width: 30px;
height: 200px;
margin-left: 60px;
background: #fff;
opacity: 0.5;
position: absolute;
left: -40px;
top: -100px;
z-index: 1;
transform: rotate(45deg);
transition: all 0.1s;
animation-name: slideme;
animation-duration: 3s;
animation-delay: 0.05s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}

Пример 9

Кнопка со свечением

Кнопка

Настройки CSS

.btn-new {
box-shadow: 0 5px 15px 0 rgba(11, 99, 246, 1);
transition: 0.5s;
}

.btn-new:hover {
transform: translate(0,-3px);
box-shadow: 0 20px 40px 0 rgba(11, 99, 246, 1);
}

Пример 10

Кнопка с анимированным бликом. Вариант 2

Кнопка

Настройки CSS

@keyframes slideme {
0% {
left: -30px;
margin-left: 0px;
}
30% {
left: 110%;
margin-left: 80px;
}
100% {
left: 110%;
margin-left: 80px;
}
}

.btn-new {
overflow: hidden;
position: relative;
}

.btn-new:after {
content: "";
position: absolute;
top: 0;
left: -200px;
width: 60px;
height: 100px;
background-color: #fff;
filter: blur(30px);
transform: skewX(30deg) translateZ(0);
transition: 1s;
animation-name: slideme;
animation-duration: 3s;
animation-delay: 0.05s;
animation-timing-function: ease;
animation-iteration-count: infinite;
}