a.ghost-button(href="#") HELLO
View Compiled
@import "bourbon";
$body: #8e44ad;
$color: white;
body, html {
width: 100%;
height: 100%;
background-color: $body;
color: $color;
font-family: 'Helvetica Neue', 'Helvetica', 'Arial';
font-weight: 100;
font-size: 24px;
}
.ghost-button {
@include position(absolute, 0px 0px 0px 0px);
box-sizing: border-box;
width: 400px;
height: 100px;
margin: auto;
border: 2px solid $body;
text-align: center;
line-height: 100px;
color: $color;
text-decoration: none;
border-radius: 3px;
letter-spacing: 10px;
transition: border .2s ease-out;
&:before {
content: '';
display: block;
position: absolute;
box-sizing: border-box;
width: 380px;
left: 8px;
top: 8px;
height: 80px;
border: 2px solid white;
}
&:hover {
border: 2px solid $color;
}
}
View Compiled
This Pen doesn't use any external CSS resources.