В последнее время было создано множество эффектов, в которых за основу были взяты принципы Google Material Design. В качестве пример можно привести ripple click effect, или как его ещё называют click waves. Данные эффекты зависят от месторасположения вашего клика или прикосновения. Однако главной целью является произвести положительное впечатление. Обычно данные эффекты используются на мобильных устройствах, для визуализации нажатий, но можно расширить список применения. Сегодня мы бы хотели показать вам несколько клик/тач эффектов, использующих анимацию. Сразу предупреждаем, что данные примеры исключительно экспериментальные и работают в последних версиях браузеров. IE10 не поддерживает анимацию псевдо-элементов, так что данный браузер сразу отбрасывается. Иконки мы взяли из коллекции Font Awesome: 1 <button class="cbutton cbutton--effect-boris"> 2 <i class="cbutton__icon fa fa-fw fa-play"></i> 3 <span class="cbutton__text">Play</span> 4 </button> Основной стиль для кнопок: 01 .cbutton { 02 position: relative; 03 display: inline-block; 04 margin: 1em; 05 padding: 0; 06 border: none; 07 background: none; 08 color: #286aab; 09 font-size: 1.4em; 10 transition: color 0.7s; 11 } 12 13 .cbutton.cbutton--click, 14 .cbutton:focus { 15 outline: none; 16 color: #3c8ddc; 17 } 18 19 .cbutton__icon { 20 display: block; 21 } 22 23 .cbutton__text { 24 position: absolute; 25 opacity: 0; 26 pointer-events: none; 27 } 28 29 .cbutton::after { 30 content: ''; 31 position: absolute; 32 top: 50%; 33 left: 50%; 34 margin: -35px 0 0 -35px; 35 width: 70px; 36 height: 70px; 37 border-radius: 50%; 38 opacity: 0; 39 pointer-events: none; 40 } При добавлении спец класса через JavaScript будет запускаться анимация: 01 /* Effect Boris */ 02 03 .cbutton--effect-boris::after { 04 background: rgba(111,148,182,0.1); 05 } 06 07 .cbutton--effect-boris.cbutton--click::after { 08 animation: anim-effect-boris 0.3s forwards; 09 } 10 11 @keyframes anim-effect-boris { 12 0% { 13 transform: scale3d(0.3, 0.3, 1); 14 } 15 25%, 50% { 16 opacity: 1; 17 } 18 100% { 19 opacity: 0; 20 transform: scale3d(1.2, 1.2, 1); 21 } 22 } А вот и пример: В эффекте “Stana”, мы используем преобразование SVG clipPath, что работает пока что только в Chrome. CSS свойство clip-path, которое используется в эффекте “Stoja” работает не во всех браузерах. Данный пример не будет работать должным образом в мобильном Safari, так что в эффектах “Azra” и “Dejan” цвета могут быть непредсказуемыми. Надеемся данные эффекты покажутся вам интересными :)