Стили кнопок 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 вопроса и получите готовый сайт для вашей сферы деятельности
Пример 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;
}
ждут вас
