Home / Frontend Codes and Demos / CSS Code Demos / Simple pure CSS button hover effect

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.

Demo Download

Author Julia
Created FEBRUARY 14, 2017
License Open
Compatible browsers Chrome, Firefox, Safari

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

Simple pure CSS button hover effect Preview

About CV

I'm frontend developer

Check Also

Morph images on hover Menu Portfolio with pixi.js

Morph images on hover Menu Portfolio with pixi.js

Using Pixi.js plugin displacement filter to "morph" images while hovering connected sidebar links. Done using html, css, jQuery, TweenMax and pixi.js. Demo and download available.