Simple pure CSS button hover effect

Simple awesome pure CSS button hover effect. Developed using html, css, vanilla-tilt.js and JavaScript. Demo and download available.

HTML Snippet

<div class="button_container"> 	<p class="description">A simple pure CSS hover effect</p> 	<button class="btn"><span>Hover me!</span></button> </div>

CSS Code

@import url('https://fonts.googleapis.com/css?family=Amatic+SC');  body { 	margin: 0; 	height: 100%; 	background-image: linear-gradient(to top, #d9afd9 0%, #97d9e1 100%); 	background-repeat: no-repeat;   background-size: cover;   background-attachment: fixed; }  .button_container { 	position: absolute;   left: 0;   right: 0;   top: 30%; }  .description, .link {   font-family: 'Amatic SC', cursive;   text-align: center; }  .description { 	font-size: 35px; }  .btn {   border: none;   display: block;   text-align: center;   cursor: pointer;   text-transform: uppercase;   outline: none;   overflow: hidden;   position: relative;   color: #fff;   font-weight: 700;   font-size: 15px;   background-color: #222;   padding: 17px 60px;   margin: 0 auto;   box-shadow: 0 5px 15px rgba(0,0,0,0.20); }  .btn span {   position: relative;    z-index: 1; }  .btn:after {   content: "";   position: absolute;   left: 0;   top: 0;   height: 490%;   width: 140%;   background: #78c7d2;   -webkit-transition: all .5s ease-in-out;   transition: all .5s ease-in-out;   -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);   transform: translateX(-98%) translateY(-25%) rotate(45deg); }  .btn:hover:after {   -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);   transform: translateX(-9%) translateY(-25%) rotate(45deg); }  .link {   font-size: 20px;   margin-top: 30px; }  .link a {   color: #000;   font-size: 25px;  }

Preview