HTML
<div>
<h1>Simple css ghost buttons</h1>
<button class="fade">Hover me</button>
<button class="top">Hover me</button>
<button class="bottom">Hover me</button>
<button class="right">Hover me</button>
<button class="left">Hover me</button>
<button class="topLeft">Hover me</button>
<button class="topRight">Hover me</button>
<button class="bottomRight">Hover me</button>
<button class="bottomLeft">Hover me</button>
<button class="center">Hover me</button>
</div>
CSS
/*Decorative background */
div {
font-size: 62.5%;
min-height: 100vh;
background:#61b2d8;
background:-moz-linear-gradient(45deg, #3498db 0%, #9b59b6 100%) fixed;
background:-webkit-linear-gradient(45deg, #3498db 0%, #9b59b6 100%) fixed;
padding: 60px 0;
}
h1 {
font-family: 'Montserrat', sans-serif;
font-size: 6em;
text-transform: uppercase;
text-align: center;
color: #fff;
}
/*Basic button styling */
button {
background: 0 0;
border-radius: 2px;
cursor: pointer;
display: block;
height: 60px;
line-height: 60px;
padding: 0 30px 0 25px;
position: relative;
transition: all .3s;
border: 2px solid #fff;
font-size: 1.3em;
letter-spacing: 2px;
text-transform: uppercase;
z-index: 0;
margin: 60px auto 0 auto;
color: #fff;
overflow: hidden;
font-family: 'Open Sans', sans-serif;
}
button:hover {
color: #666;
}
/*Adding the hover effect base */
button::before {
content: '';
height: 100%;
width: 100%;
background: #fff;
position: absolute;
top: 0;
right: 0;
transition: all .3s;
z-index: -1;
}
/*Fade in*/
button.fade::before {
opacity: 0;
}
button.fade:hover::before {
opacity: 1;
}
/*Slide in from top*/
button.top::before {
transform: translate(0, -100%);
}
button.top:hover::before {
transform: translate(0, 0);
}
/*Slide in from bottom*/
button.bottom::before {
transform: translate(0, 100%);
}
button.bottom:hover::before {
transform: translate(0, 0);
}
/*Slide in from right*/
button.right::before {
transform: translate(100%, 0);
}
button.right:hover::before {
transform: translate(0, 0);
}
/*Slide in from left*/
button.left::before {
transform: translate(-100%, 0);
}
button.left:hover::before {
transform: translate(0, 0);
}
/*Slide in from top left*/
button.topLeft::before {
transform: translate(-100%, -100%);
}
button.topLeft:hover::before {
transform: translate(0, 0);
}
/*Slide in from top right*/
button.topRight::before {
transform: translate(100%, -100%);
}
button.topRight:hover::before {
transform: translate(0, 0);
}
/*Slide in from bottom right*/
button.bottomRight::before {
transform: translate(100%, 100%);
}
button.bottomRight:hover::before {
transform: translate(0, 0);
}
/*Slide in from bottom left*/
button.bottomLeft::before {
transform: translate(-100%, 100%);
}
button.bottomLeft:hover::before {
transform: translate(0, 0);
}
/*Grow from center*/
button.center::before {
transform: scale(0, 0);
}
button.center:hover::before {
transform: scale(1, 1);
}
