<a href="#" class="btn">Click Click Click!</a>
// reset & normalize
* {
text-decoration: none;
}
html {
font-size: 62.5%; // 62.5% = 1rem = 10px
padding: 3rem;
color: #614f38;
}
body {
font-size: 1.6rem;
}
// Start!
a.btn {
position: relative;
display: inline-block;
padding: 1.2rem 2rem 1rem;
color: #614f38;
z-index: 1;
&:before {
content: "";
position: absolute;
z-index: -1;
right: 0;
left: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
border-radius: 25px;
border: 2px solid;
transition: all .3s;
}
&:hover {
color: #fff;
&:before {
right: 0;
transform: scale(1.2);
background: #614f38;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.