CSS3 - Lollipop Click Effect

by Luca De Nardi

HTML

<br>
<center>
     <h2>Click on link to see effect</h2>

    <button class="nexus grey">Button 1</button>
    <br/>
    <br/>
</center>

CSS

@-webkit-keyframes clickeffect {
    from {
        width: 0;
        height: 0;
        margin-left: 0;
        margin-top: 0;
        opacity: 0.7;
    }
    to {
        width: 200px;
        height: 200px;
        margin-left: -100px;
        margin-top: -100px;
        opacity: 0;
    }
}
@keyframes clickeffect {
    from {
        width: 0;
        height: 0;
        margin-left: 0;
        margin-top: 0;
        opacity: 0.7;
    }
    to {
        width: 200px;
        height: 200px;
        margin-left: -100px;
        margin-top: -100px;
        opacity: 0;
    }
}
.nexus {
    width: 200px;
    height: 50px;
    border: 0px;
    position: relative;
    text-align: center;
    font-family:'Roboto', sans-serif;
    font-weight: lighter;
    font-size: 27px;
    color: #FFFFFF;
    background: #838383;
    cursor: pointer;
    overflow: hidden;
    padding: 8px;
    display: inline-block;
    text-decoration: none;
}
.effect {
    border-radius: 100%;
    position: absolute;
    background: rgba(255, 255, 255, 0.5);
    pointer-events: none;
    animation: clickeffect 1s ease-in-out;
    -webkit-animation: clickeffect 1s ease-in-out;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}
.nexus.grey {
    color: #aaa;
    background: #333;
}

JavaScript

var button = document.querySelectorAll('.nexus');
for (var i = 0; i < button.length; i++) {
    button[i].onmousedown = function (e) {

        var x = (e.offsetX == undefined) ? e.layerX : e.offsetX;
        var y = (e.offsetY == undefined) ? e.layerY : e.offsetY;
        var effect = document.createElement('div');
        effect.className = 'effect';
        effect.style.top = y + 'px';
        effect.style.left = x + 'px';
        var elem, evt = e ? e : event;
        if (evt.srcElement) elem = evt.srcElement;
        else if (evt.target) elem = evt.target;
        elem.appendChild(effect);
        setTimeout(function () {
            elem.removeChild(effect);
        }, 1000);
    }

}