Эффекты при нажатии CSS
Эффекты при нажатии CSS
Рассмотрим, как добавить красивые эффекты при нажатии на кнопку с помощью CSS и jQuery.
Создадим три кнопки с разными эффектами. Структура:
<button class="mybutton mybutton--animate-click-one">
<span class="mybutton__text">Первый эффект при нажатии</span>
</button>
<button class="mybutton mybutton--animate-click-two">
<span class="mybutton__text">Второй эффект при нажатии</span>
</button>
<button class="mybutton mybutton--animate-click-three">
<span class="mybutton__text">Третий эффект при нажатии</span>
</button>
Общие стили
.mybutton {
position: relative;
margin-right: 20px;
padding: 4px 14px;
border: 1px solid lightgreen;
background: none;
color: #286aab;
overflow: visible;
cursor: pointer;
}
.mybutton::after {
position: absolute;
top: 50%;
left: 50%;
margin: -35px 0 0 -35px;
width: 70px;
height: 70px;
border-radius: 50%;
content: '';
opacity: 0;
}
Стили для первой кнопки
.mybutton--animate-click-one::after {
box-shadow: inset 0 0 0 35px rgba(111,148,182,0);
}
.mybutton--animate-click-one.mybutton--click::after {
animation: anim-animate-click-one 0.6s ease-out forwards;
}
@keyframes anim-animate-click-one {
0% {
opacity: 1;
transform: scale3d(0.4, 0.4, 1);
}
80% {
box-shadow: inset 0 0 0 2px lightgreen;
opacity: 0.1;
}
100% {
box-shadow: inset 0 0 0 2px lightgreen;
opacity: 0;
transform: scale3d(1.2, 1.2, 1);
}
}
Для анимации второй кнопки
.mybutton--animate-click-two::after {
box-shadow: 0 0 0 3px rgba(111,148,182,0.05);
}
.mybutton--animate-click-two.mybutton--click::after {
animation: anim-animate-click-two 0.5s ease-out forwards;
}
@keyframes anim-animate-click-two {
0% {
box-shadow: 0 0 0 3px lightgreen;
opacity: 1;
transform: scale3d(0.6, 0.6, 1);
}
100% {
box-shadow: 0 0 0 100px rgb(110, 180, 110);
opacity: 0;
transform: scale3d(1, 1, 1);
}
}
Эффекты для третьей кнопки
.mybutton--animate-click-three::after {
background: lightgreen;
}
.mybutton--animate-click-three.mybutton--click::after {
animation: anim-nimate-click-three 0.5s forwards;
}
@keyframes anim-nimate-click-three {
0% {
opacity: 1;
transform: scale3d(0.1, 0.1, 1);
}
100% {
opacity: 0;
transform: scale3d(8, 8, 1);
}
}
Будьте внимательны, должен быть подключен jQuery
Добавление и удаление класса для появления анимации при нажатии на кнопку
jQuery(($) => {
$('.mybutton--animate-click-one, .mybutton--animate-click-two, .mybutton--animate-click-three')
.click(function() {
return _this = this,
$(_this).stop().addClass('mybutton--click'), setTimeout(function() {
$(_this).removeClass('mybutton--click');
}, 600);
});
});
Результат:
Добавим эффекты на чистом JavaScript
Нативный JavaScript будет следующий.
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll('.beautiEff .mybutton').forEach(function(el){
el.addEventListener('click', function(){
el.classList.add('mybutton--click'), setTimeout(function() {
el.classList.remove('mybutton--click');
}, 600);
});
});
});
Полезные ссылки
- Шпаргалка по использованию jQuery
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Статьи из данной категории:
Комментарии
- Комментариев пока нет.