Кнопки в стиле Material Design

Небольшая подборка веб-кнопок в стиле Material Design с эффектом анимации пульсирования (ripple) по клику. Это может выглядеть как блик или полупрозрачная волна и, в зависимости от реализации, эффект-волна будет исходить именно из того места где было нажатие курсора мыши по кнопке. И как раз в этом обзоре рассмотрим несколько вариантов эффектов, которые построенные двумя различными способами: чистый CSS, с помощью JS.

Material Design на CSS

Material Design кнопки

Первый вариант кнопок сделан только одними средствами каскадной таблицы 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

эффект ripple

В этом варианте применяется 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;
}
4 комментария
  1. Добрый день !

    Скажите пожалуйста как сделать кнопку как на сайте «КУПИТЬ АКЦИИ» в HTML коде ?

    чтобы запускался вот этот скрипт

    КУПИТЬ АКЦИИ

    Спасибо !

    1. Здравствуйте! Не совсем понял. Это же не скрипт, а обычный HTML код. Может по нажатию на эту кнопку должно открываться модальное окно?

  2. Здравствуйте!

    Подскажите, что делаю не так.

    1. Подключил скрипт через function.php.

    2. В style.css добавил .ripple с его стилями.

    3. К ссылке «Читать далее» добавил ripple, получилось class="more-link ripple"

    В итоге у меня при загрузке страницы эффект применяется к ссылке и соответственно исчезает.

    Или данный эффект только к button можно применить?

    1. Добрый день! Вместо класса добавляйте атрибут к элементу data-ripple. Выйдет так: <a class="more-link" data-ripple rel="nofollow">Demo button 4</a>

Оставить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *