CodePen

HTML

            
              <div id="test_button" class="test_effect">
    <div class="test_effect_inner">Click Me</div>
</div>​
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              /* Styles for selected entries being edited */
@-webkit-keyframes selection_animation
{
    0%
    {
        -webkit-box-shadow: 0px 2px 18px 0px #666;
        background-position:-80px 0px;
    }
    100%
    {
        -webkit-box-shadow: 0px 2px 18px 0px transparent;
        background-position:120px 0px;
    }
}
.test_effect:hover
{
    cursor:pointer;
    background: #bfbfbf;
}
.test_effect:active
{
    cursor:pointer;
    background: #a0a0a0;
    padding-top:6px;
    color: #eee;
    -webkit-box-shadow: inset 0px 2px 2px 0px rgba(0, 0, 0, 0.3);
}
.test_effect
{
    border-radius:10px;
    width:140px; height:42px;
    margin:10px;
    color: #fff;
    
    background-color:#aaa;
    border:1px solid #888;
    padding:4px;
    -webkit-user-select:none;
    display:block;
    
    -webkit-box-sizing: border-box;
}
.test_effect_inner
{
    width:130px; height:32px;
    line-height:28px;
    z-index:2;
    position:relative;
    pointer-events:none;
    
    font-family:Arial;
    font-weight:bold;
    font-size:14px;

    text-shadow: 0px -1px 1px rgba(0,0,0,.5);
    text-align:center;
}
.test_effect:after
{
    content:".";
    color: transparent;
    background: transparent;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(20%,rgba(129,129,129,0)), color-stop(86%,rgb(129,129,129)));
    width:138px; height:39px;
    position:fixed;
    margin-left:-4px; margin-top: -39px;
    z-index:1;
    border-radius:10px;
}
.test_effect.clear
{
        -webkit-animation: none !important;
}
.test_effect.clicked
{
    border-radius:10px;
    width:140px; height:42px;
    margin:10px;
    
    /*background-color:#aaa;*/
    background-image: -webkit-gradient(linear, left top, right bottom, color-stop(20%,rgba(255, 255, 255, 0)), color-stop(37%,rgba(255, 255, 255, 0.7)), color-stop(47%,rgba(255, 255, 255, 0.7)), color-stop(67%,rgba(255, 255, 255, 0)));
    
    border:1px solid #888;
    padding:4px;
    
    background-repeat:no-repeat;
    background-position:120px 0px;
    
    -webkit-animation: selection_animation 500ms 1;
    -webkit-animation-timing-function: linear;
}
​
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(".test_effect").click(function(e)
{
    var that = e;
    
    if( $(e.target).hasClass("clicked") )
    {
        //Button is already doing something / previously clicked
        return false;
    }
    
    $(e.target).removeClass("clicked");
    $(e.target).addClass("cleared");
    
    //Have a delay, as though something is loading after click
    setTimeout(function()
    {
        LoadingComplete(that);
    },200);
});

function LoadingComplete(e)
{
    $(e.target).removeClass("cleared");
    $(e.target).addClass("clicked");
    
    var that = e;
    
    setTimeout(function()
    {
        Finalize(that);
    },600);
}
function Finalize(e)
{
    $(e.target).removeClass("clicked");
}​
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................