<a href="#" class="gradebtn">MORE</a>
.gradebtn {
display: block;
border-bottom: 1px dotted #fff;
padding: 7px 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
position: relative;
width:150px;
color:#f32;
border:1px solid #f32;
text-decoration:none;
text-align:center;
}
.gradebtn:hover{
color:#fff;
}
.gradebtn::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
content: '';
margin: auto;
width: 100%;
height: 40px;
background: rgb(243 2 0 / 40%);
transform: scale(0, 1);
transform-origin: right top;
transition: transform .3s;
z-index: -1;
}
.gradebtn:hover::after {
transform: scale(1, 1);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.