View CSS
View HTML
/* Resource - https://codepen.io/abdelRhman345/pen/PXMmdv */
.btn-bars {
position: relative;
display: block;
text-transform: uppercase;
padding: 10px 20px;
text-decoration: none;
color: #262626;
font-family: sans-serif;
font-size: 20px;
font-weight: 600;
transition: .5s;
z-index: 1;
}
.btn-bars:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-top: 2px solid #262626;
border-bottom: 2px solid #262626;
transform: scaleY(2);
opacity: 0;
transition: .3s;
}
.btn-bars:after {
content: '';
position: absolute;
top: 2px;
left: 0;
width: 100%;
height: 100%;
background-color: #262626;
transform: scale(0);
opacity: 0;
transition: .3s;
z-index: -1;
}
.btn-bars:hover {
color: #fff;
}
.btn-bars:hover:before {
transform: scaleY(1);
opacity: 1;
}
.btn-bars:hover:after {
transform: scaleY(1);
opacity: 1;
}
<a class="btn-bars">BUTTON</a>