Android L ripple effect with CSS3 and Javascript.
A Pen by Dolphin Wood on CodePen.
Android L ripple effect with CSS3 and Javascript.
A Pen by Dolphin Wood on CodePen.
<div id="wrap"> | |
<h1>Android L Ripple Effect</h1> | |
<div id="main"> | |
<button>BUTTON</button> | |
<button>BUTTON</button> | |
<button>BUTTON</button> | |
<button>BUTTON</button> | |
</div> | |
</div> |
var addRippleEffect = function (e) { | |
var target = e.target; | |
if (target.tagName.toLowerCase() !== 'button') return false; | |
var rect = target.getBoundingClientRect(); | |
var ripple = target.querySelector('.ripple'); | |
if (!ripple) { | |
ripple = document.createElement('span'); | |
ripple.className = 'ripple'; | |
ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'; | |
target.appendChild(ripple); | |
} | |
ripple.classList.remove('show'); | |
var top = e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop; | |
var left = e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft; | |
ripple.style.top = top + 'px'; | |
ripple.style.left = left + 'px'; | |
ripple.classList.add('show'); | |
return false; | |
} | |
document.addEventListener('click', addRippleEffect, false); |
body { | |
margin: 0; | |
padding: 0; | |
} | |
#wrap { | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
align-items: center; | |
} | |
h1 { | |
display: flex; | |
margin: 0; | |
padding: 0; | |
align-items: center; | |
flex: 2; | |
} | |
#main { | |
flex: 5; | |
} | |
button { | |
position: relative; | |
display: block; | |
width: 13em; | |
height: 3em; | |
margin: 2em; | |
border: none; | |
outline: none; | |
letter-spacing: .2em; | |
font-weight: bold; | |
background: #dfdfdf; | |
cursor: pointer; | |
overflow: hidden; | |
user-select: none; | |
border-radius: 2px; | |
} | |
button:nth-child(2) { | |
color: #fff; | |
background: #4285f4; | |
} | |
button:nth-child(3) { | |
color: #fff; | |
background: #00bad2; | |
} | |
button:nth-child(4) { | |
color: #fff; | |
background: #ff8a80; | |
} | |
.ripple { | |
position: absolute; | |
background: rgba(0,0,0,.15); | |
border-radius: 100%; | |
transform: scale(0); | |
pointer-events: none; | |
} | |
.ripple.show { | |
animation: ripple .75s ease-out; | |
} | |
@keyframes ripple { | |
to { | |
transform: scale(2); | |
opacity: 0; | |
} | |
} |