<h1>3D Flip Button</h1>
<button data-label="do it!">do it!</button>

<!-- 
you could automatically set the data-label attribute using javascript, or use a span instead of :before
-->

html,body {
  padding:0;
  margin:0;
	background:#fafafa;
	text-align:center;
}

body {
  padding-top:4em;
}

h1 {
  margin-bottom:3rem;
  font-family:sans-serif;
  color:#666;
}

button {
	position:relative;
	border:0;
	margin:0;
	padding:0;
	cursor:pointer;
	font-size:1rem;
	font-weight:bold;
	color:rgba(0,0,0,0);
	background:transparent;
	border-radius:.25rem;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
}

button,
button:after,
button:before {
	padding:.6875rem 2rem;
	-webkit-transition:-webkit-transform 0.75s,background-color .125s;
	-moz-transition:-moz-transform 0.75s,background-color .125s;
	-ms-transition:-ms-transform 0.75s,background-color .125s;
	transition:transform 0.75s,background-color .125s;
	-webkit-transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
	-ms-transform-style:preserve-3d;
	transform-style:preserve-3d;
}

button:after,
button:before {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	border-radius:.25rem;
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
	backface-visibility:hidden;

}

button:before {
	z-index:2;
	color:#fff;
	background-color:#3e87ec;
	content:attr(data-label);
}

button:after {
	z-index:1;
	background-color:#999;
	background-repeat:no-repeat;
	background-position:center center;
	background-image:url(data:image/gif;base64,R0lGODlhEAAQAPIAAJmZmf///7CwsOPj4////9fX18rKysPDwyH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQACgABACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkEAAoAAgAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkEAAoAAwAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkEAAoABAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQACgAFACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQACgAGACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAAKAAcALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==);
	-webkit-transform:rotateX(180deg);
	-moz-transform:rotateX(180deg);
	-ms-transform:rotateX(180deg);
	transform:rotateX(180deg);
	content:'';
}

button:active:before {
	background-color:#3571c8;
}

button.loading {
	-webkit-transform:rotateX(180deg);
	-moz-transform:rotateX(180deg);
	-ms-transform:rotateX(180deg);
	transform:rotateX(180deg);
}

var loading = function(e) {
  e.preventDefault();
  e.stopPropagation();
  e.target.classList.add('loading');
  e.target.setAttribute('disabled','disabled');
  setTimeout(function(){
    e.target.classList.remove('loading');
    e.target.removeAttribute('disabled');
  },1500);
};

var btns = document.querySelectorAll('button');
for (var i=btns.length-1;i>=0;i--) {
  btns[i].addEventListener('click',loading);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://codepen.io/rikschennink/pen/amxZqR