Небольшая подборка веб-кнопок в стиле 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>