<a href="http://allisondskinner.com">COOL FLAT BUTTON</a>
@import url('https://fonts.googleapis.com/css?family=Inconsolata:400,700');
body {
background: #eeff00
}
a {
/*placement for code pen*/
margin: 10% 40%;
/*Button Text Style*/
font-family:'Inconsolata', 'Helvetica', 'Arial', sans-serif;
font-size: inherit;
text-align: center;
font-weight: bold;
letter-spacing: 3px;
text-transform: uppercase;
text-decoration:none;
/*Button Color & Border*/
border: 4px solid #3C14D0 ;
color: #3C14D0;
background: #fff;
outline: none;
/*Position, Display, Size*/
position: relative;
display: inline-block;
padding: 15px 10px 14px;
cursor: pointer;
width: auto;
}
a:after {
/*Make a:after be as big as button*/
position: absolute;
width: 100%;
height: 100%;
/*Give a:after Border & Background color*/
border: 2px solid #3C14D0;
background-color: #3C14D0;
/*Decide Location of a:after..this gives a bottom right shadow*/
left: 4px;
top: 4px;
/*Place a:after behind button*/
z-index: -1;
content: '';
/*Animation/Transition Speed*/
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
}
a:hover {
top:2px;
left:2px;
}
a:hover:after {
top: -2px;
left: -2px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.