Lollipop click animation

by BramVanroy

HTML

<script src="http://fonts.googleapis.com/css?family=Roboto:500,900italic,900,400italic,100,700italic,300,700,500italic,100italic,300italic,400"></script>
<div class="thumbnail"></div>
<div class="buttons">
    <button class="bubble-wrap blue-light">Click me</button>
    <button class="bubble-wrap yellow">Click me</button>
    <button class="bubble-wrap pink">Click me</button>
    <button class="bubble-wrap blue-dark">Click me</button>
</div>
<div id="description">
    <h1>Lollipop click animations in CSS</h1>
    <p>Android 5.0 Lollipop brought us some fancy new design (<em>material</em> design). This trend is finding its way onto the web. So we, as webdevelopers, should find techniques to transpose these OS capabilities to the interwebz.</p>
    <p>I took the liberty to edit <a href="http://codepen.io/dwijitsolutions/pen/myrvJW" target="_blank">this pen</a> by dwijitsolutions. I used jQuery - 'cause <em>I'm lovin' it</em> - and added some improvements overall. Especially automatically determining the correct width for the bubble and its position are huge additions.</p>
</div>

CSS

/* STYLE FOR THE ANIMATIONS
    These styles are required 
    for the lollipop click effect
*/
.bubble-wrap {
    width: 120px;
    height: 50px;
    border-radius: 6px;
    position: relative;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    border: 0 none;
    background: #F06292;
    color: #FFF;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 16px;
    line-height: 50px;
    margin: 25px;
    /* Fix webkit overflow problem */
    z-index: 0;
}
.bubble-wrap:focus {outline: none;}

.pink {background: #F06292;}
.yellow {background: #E2DC35;}
.blue-light {background: #80B5BF;}
.blue-dark {background: #1A6F84;}

.bubble {
    position: absolute;
    background: rgba(255, 255, 255, 0.36);
    pointer-events: none;
    border-radius: 50%;
    transform: scale(0);
    animation: bubble-effect-in 1200ms forwards, bubble-effect-out 2s 1200ms forwards;
}
@keyframes bubble-effect-in {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes bubble-effect-out {
    from {opacity: 1;}
    to {opacity: 0;}
}

/* STYLE FOR THIS FIDDLE
    The styles below are merely for illustration, and
    not required for the animation
*/

body {
    font: 300 16px/1.4 'Roboto', sans-serif;
    max-width: 1280px;
    margin: 0 auto;
}

em {font-style: italic;}
bold {font-weight: 700;}
h1 {
    font-weight: 100;
    font-size: 36px;
    text-align: center;
    border-bottom: 1px solid;
}
p {
    margin: 1.2em 0;
    text-align: left;
}
a {color: inherit;text-decoration: underline;}
a:hover {text-decoration: none;}
.thumbnail {
    background: url('http://i.imgur.com/D8eok3f.jpg') no-repeat center;
    background-size: cover;
    width: 100%;
    height: 0;
    padding-top: 25%;
}
.buttons {
    display: flex;
    justify-content: space-around;
}

#description {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 25px 25px;
}

JavaScript

$(".bubble-wrap").on("mousedown", function (e) {
    var $this = $(this),
        w = Math.sqrt(Math.pow($this.outerWidth(), 2) + Math.pow($this.outerHeight(), 2)) * 2,
        mousePosX = e.offsetX === undefined ? e.originalEvent.layerX : e.offsetX,
        mousePosY = e.offsetY === undefined ? e.originalEvent.layerY : e.offsetY,
        bubble = $('<div class="bubble">');

    bubble.css({
        "top": mousePosY - (w / 2),
            "left": mousePosX - (w / 2),
            "width": w,
            "height": w
    }).appendTo($this);

    setTimeout(function () {
        $this.children(".bubble:first").remove();
    }, 3210);

});

// For Fiddle purposes
$("button").click(function (e) {
    e.preventDefault();
});