Booton

by Felipe Alfaro

HTML

<label>
    <button>
        Click me baby
    </button>
</label>

CSS

label{
    display: inline-block;
    -webkit-perspective: 400px;
}
button {
    border: none;
    overflow: hidden;
    border-radius: 3px;
    background: #5a8b3e;
    color: white;
    font-family: open sans;
    font-weight: lighter;
    font-size: 12px;
    padding: 9px 15px;
    outline: none;
    cursor: pointer;
    transition: 100ms;
    box-shadow: rgba(0, 0, 0, 0.5) 1px 1px 5px -1px;
}
body {
    margin: 30px;
}

JavaScript

var button = document.querySelector('button'),
    label = document.querySelector('label'),
	style = document.createElement('style');
    
document.getElementsByTagName('head')[0].appendChild(style);
    

label.onmousedown = function(e){
	var labelWidth = label.offsetWidth,
    	labelHeight = label.offsetHeight,
    	clickX = e.layerX,
        clickY = e.layerY,
    	clickPercentX = Math.round((clickX/labelWidth)*100),
        clickPercentY = Math.round((clickY/labelHeight)*100),
        rotateY = Math.round(clickPercentX/2-25),
        rotateX = -Math.round(clickPercentY/2-25);
    var css = 'button:active{transform:scale(0.95) rotateY('+rotateY+'deg) rotateX('+rotateX+'deg);}';
    style.innerHTML = css;
};

button.onclick = function(){
	alert();
};