<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!
.btn {
display: inline-block;
border: 1px solid;
overflow: hidden;
position: relative;
background: #614f38;
color:#fff;
padding:1rem 2rem;
&:after {
background: #fff;
content: "";
height: 155px;
left: -75px;
opacity: .2;
position: absolute;
top: -50px;
transform: rotate(35deg);
transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
width: 50px;
z-index: 1;
}
&:hover {
&:after {
left: 120%;
transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.