<a href="#" class="btn"><span>Click Click Click! </span></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!
/*Button Two*/
.btn {
border-radius: 4px;
background: #614f38;
border: none;
padding: 1.5rem 2rem;
display:inline-block;
transition: all 0.4s;
text-align: center;
cursor: pointer;
color:#fff;
span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
&:after {
content: '»';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
}
&:hover span {
padding:0 2rem 0 1rem;
&:after {
opacity: 1;
right: 0;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.