<div class="pagelink">
<a href="#" class="btn">Click Click Click</a>
</div>
// reset & normalize
* {
text-decoration: none;
}
html {
font-size: 62.5%; // 62.5% = 1rem = 10px
padding: 3rem;
color: #614f38;
}
body {
font-size: 1.6rem;
}
// Start!
.pagelink{
text-align:center;
}
a.btn {
position: relative;
display: inline-block;
margin:0 5px;
border-bottom: 2px solid;
padding: .5rem 2.6rem .5rem .5rem;
transition: all .3s;
color: #614f38;
&:before ,&:after{
content: '';
position: absolute;
transition: all .3s;
}
&:before {
right: 5px;
bottom: 40%;
width: 6px;
height: 6px;
border-top: solid 2px currentColor;
border-right: solid 2px currentColor;
transform: rotate(45deg);
}
&:after{
opacity:0;
bottom:0;
left:0;
height:20%;
width:0;
background:rgba(#ffdd44,.7);
}
&:hover {
letter-spacing:2px;
&:before {
right:5px;
}
&:after{
opacity:1;
width:100%;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.