<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 {
text-align: left;
position: relative;
text-decoration: none;
display: inline-block;
background-color: #fff;
border-radius: 4px;
padding: 11px 20px 11px 40px;
color: inherit;
transition: all .3s;
border: 1px solid;
&:before, &:after {
content: "";
position: absolute;
display:block;
top: 0;
bottom: 0;
margin: auto;
transition: all .3s;
}
&:before {
left:15px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #614f38;
}
&:after {
left: 18px;
width: 5px;
height: 5px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
&:hover {
background-color: #614f38;
color: #fff;
&:before{
background:#fff;
}
&:after{
border-color:#614f38;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.