div.content.content-two
a.button.button-two.
Hover Me :D
View Compiled
:root {
--white: #ffffff;
--dark: #353544;
}
.content {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
&-two {
background: var(--dark);
}
}
.button {
font-size: 2rem;
font-family: 'Montserrat', sans-serif;
padding: 1rem;
position: relative;
cursor: pointer;
color: var(--white);
&:after{
content: '';
background: var(--white);
position: absolute;
bottom: 0;
height: 3px;
width: 100%;
left: 0;
right: 0;
transition: all cubic-bezier(0, 0.96, 0.58, 1.1) 1s;
bottom: -20px;
opacity: 0;
}
&:hover {
&:after {
bottom: 0;
opacity: 1;
transition: all cubic-bezier(0, 0.96, 0.58, 1.1) 1s;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.