Небольшая подборка веб-кнопок в стиле Material Design с эффектом анимации пульсирования (ripple) по клику. Это может выглядеть как блик или полупрозрачная волна и, в зависимости от реализации, эффект-волна будет исходить именно из того места где было нажатие курсора мыши по кнопке. И как раз в этом обзоре рассмотрим несколько вариантов эффектов, которые построенные двумя различными способами: чистый CSS, с помощью JS.
Material Design на CSS
Первый вариант кнопок сделан только одними средствами каскадной таблицы CSS. В нем присутствует семь примеров эффектов по клику. Для их использования достаточно скопировать код стилей себе на сайт. Затем просто подставляем соответствующий класс эффекта к веб-элементу.
HTML
<div class="btn wave left">Click</div>
<div class="btn half-stroke left">Click</div>
<div class="btn stroke left">Click</div>
<div class="btn bubble left">Click</div>
<div class="btn wave right">Click</div>
<div class="btn half-stroke right">Click</div>
<div class="btn stroke right">Click</div>
CSS
.col-half {
display: inline-block;
width: 50%;
margin-right: -3px;
text-align: center;
}
.btn {
margin: 25px auto;
position: relative;
font-size: 25px;
color: #fff;
padding: 20px;
width: 200px;
overflow: hidden;
text-align: center;
cursor: pointer;
text-transform: uppercase;
}
.btn:nth-of-type(1) {
background-color: #2ecc71;
}
.btn:nth-of-type(2) {
background-color: #3498db;
}
.btn:nth-of-type(3) {
background-color: #e74c3c;
}
.btn:nth-of-type(4) {
background-color: #1abc9c;
}
.btn.left:after {
left: 0;
}
.btn.right:after {
right: 0;
}
.btn.wave:after {
content: "";
background: #fff;
display: block;
position: absolute;
width: 200%;
height: 200%;
top: -5%;
border-radius: 50px;
margin-left: -30%;
opacity: 0;
transition: all 0.75s ease-in-out;
}
.btn.wave.right:after {
content: "";
background: #fff;
display: block;
position: absolute;
width: 200%;
height: 200%;
top: -5%;
border-radius: 50px;
margin-right: -30%;
opacity: 0;
transition: all 0.75s ease-in-out;
}
.btn.wave:active:after {
width: 0px;
opacity: 1;
transition: 0s;
}
.btn.stroke:after {
content: "";
background: #fff;
display: block;
position: absolute;
width: 200%;
height: 100%;
top: 0;
opacity: 0;
transition: all 0.75s ease-in-out;
}
.btn.stroke:active:after {
width: 0px;
opacity: 1;
transition: 0s;
}
.btn.half-stroke:after {
content: "";
background: #fff;
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
opacity: 0;
transition: all 0.75s ease-in-out;
}
.btn.half-stroke:active:after {
width: 0px;
opacity: 1;
transition: 0s;
}
.btn.bubble:after {
content: "";
background: #fff;
position: absolute;
width: 200px;
height: 200px;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0;
margin: auto;
border-radius: 50%;
transform: scale(1);
transition: all 0.75s ease-in-out;
}
.btn.bubble:active:after {
transform: scale(0);
opacity: 1;
transition: 0s;
}
Кнопки Material Design с плагином material ripple effect
В этом варианте применяется js код, чтобы сделать эффект клика именно в месте нажатия мыши. Сам js плагин очень легкий и простой в использовании. После его подключения нужно только подставлять необходимый класс к кнопкам.
JS
<script src="js/ripple.js"></script>
<script>
// just add effect to elements
Array.prototype.forEach.call(document.querySelectorAll('[data-ripple]'), function(element){
// find all elements and attach effect
new RippleEffect(element); // element is instance of javascript element node
});
</script>
HTML
<button data-ripple>Demo button 1</button>
<button data-ripple>Demo button 2</button>
<button data-ripple>Demo button 3</button>
<button data-ripple>Demo button 4</button>
CSS
.ripple {
animation: 2s cubic-bezier(0, 0, 0.2, 1) 0s normal forwards 1 running ripple;
background-color: rgba(255, 255, 255, 0.4);
}
@keyframes ripple {
0% {
opacity: 1;
transform: scale(0);
}
80% {
transform: scale(1);
}
100% {
opacity: 0;
}
}
button {
background-color: dodgerblue;
color: white;
padding: 10px 20px;
border:0;
font-size: 14px;
cursor: pointer;
margin: 20px;
}
Добрый день !
Скажите пожалуйста как сделать кнопку как на сайте «КУПИТЬ АКЦИИ» в HTML коде ?
чтобы запускался вот этот скрипт
КУПИТЬ АКЦИИ
Спасибо !
Здравствуйте! Не совсем понял. Это же не скрипт, а обычный HTML код. Может по нажатию на эту кнопку должно открываться модальное окно?
Здравствуйте!
Подскажите, что делаю не так.
1. Подключил скрипт через function.php.
2. В style.css добавил .ripple с его стилями.
3. К ссылке «Читать далее» добавил ripple, получилось class="more-link ripple"
В итоге у меня при загрузке страницы эффект применяется к ссылке и соответственно исчезает.
Или данный эффект только к button можно применить?
Добрый день! Вместо класса добавляйте атрибут к элементу
data-ripple. Выйдет так:<a class="more-link" data-ripple rel="nofollow">Demo button 4</a>