artstyles,
<!DOCTYPE html><html class=''>
<head>
<meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/ey_intuitive/pen/NxQdyY" />
<link rel='stylesheet prefetch' href='https://codepen.io/assets/reset/reset.css'>
<script src='https://codepen.io/assets/libs/prefixfree.min.js'></script>
<link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<style class="cp-pen-styles">
body{
display: flex;
}
.wrapper {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
text-align: center;
height: 300px;
width: 300px;
}
.my-button {
background: transparent;
border: none;
outline: none;
margin: 0;
padding: 0;
position: relative;
text-align: center;
}
.my-button svg {
top: 0;
left: 0;
}
.send-icon {
position: relative;
font-size: 40px;
color: rgba(0, 0, 0, 0.3);
}
</style></head>
<body>
<div class="wrapper">
<button class="my-button">
<span class="send-icon fa fa-paper-plane"></span>
</button>
</div><div class="wrapper">
<button class="my-button">
<span class="send-icon fa fa-paper-plane"></span>
</button>
</div> <div class="wrapper">
<button class="my-button">
<span class="send-icon fa fa-paper-plane"></span>
</button>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/mojs/latest/mo.min.js'></script>
<script>
var els = document.querySelectorAll('.my-button');
[].forEach.call( els, function(el) {
var elSpan = el.querySelector('span'),
timeline = new mojs.Timeline(),
scaleCurve = mojs.easing.path('M0,100 L25,99.9999983 C26.2328835,75.0708847 19.7847843,0 100,0'),
tween1 = new mojs.Burst({
parent: el,
duration: 1500,
shape: 'circle',
fill: [
'#e67e22',
'#DE8AA0',
'#8AAEDE',
'#8ADEAD',
'#DEC58A',
'#8AD1DE'
],
x: '50%',
y: '50%',
opacity: 0.8,
childOptions: { radius: { 20: 0 } },
radius: { 40: 120 },
angle: { 0: 180 },
count: 8,
isSwirl: true,
isRunLess: true,
easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
}), tween2 = new mojs.Transit({
parent: el,
duration: 750,
type: 'circle',
radius: { 0: 50 },
fill: 'transparent',
stroke: '#2ecc71',
strokeWidth: { 15: 0 },
opacity: 0.6,
x: '50%',
y: '50%',
isRunLess: true,
easing: mojs.easing.bezier(0, 1, 0.5, 1)
}), tween3 = new mojs.Tween({
duration: 900,
onUpdate: function (progress) {
if (progress > 0.3) {
var scaleProgress = scaleCurve(progress);
elSpan.style.WebkitTransform = elSpan.style.transform = 'scale3d(' + scaleProgress + ',' + scaleProgress + ',1)';
elSpan.style.WebkitTransform = elSpan.style.color = '#2ecc71';
} else {
elSpan.style.WebkitTransform = elSpan.style.transform = 'scale3d(0,0,1)';
elSpan.style.WebkitTransform = elSpan.style.color = 'rgba(0,0,0,0.3)';
}
}
});
timeline.add(tween1, tween2, tween3);
el.addEventListener('mousedown', function () {
timeline.play();
});
});
</script>
</body></html>
