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

HTML и CSS WordSmall

Небольшая подборка веб-кнопок в стиле 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;
}
Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

E-mail Google+ Twitter
Добавить комментарий
bold quote code