html {
padding: 25vh 10vw;
text-align: center;
}
a {
cursor: pointer;
font-family: "Roboto Condensed", sans-serif;
font-weight: 900;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: blue;
font-size: 0;
transform: translate3d(0, 0, 0);
filter: blur(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
a span {
font-size: 40px;
margin: 0;
padding: 0;
display: inline-block;
position: relative;
transition: transform cubic-bezier(0.77, 0, 0.175, 1) 250ms;
padding: 0 0.1em;
}
a span:nth-child(0n) {
transition-delay: 0ms;
}
a span:nth-child(0n):after {
transition-delay: 0ms;
}
a span:nth-child(1n) {
transition-delay: 83.3333333333ms;
}
a span:nth-child(1n):after {
transition-delay: 83.3333333333ms;
}
a span:nth-child(2n) {
transition-delay: 166.6666666667ms;
}
a span:nth-child(2n):after {
transition-delay: 166.6666666667ms;
}
a span:nth-child(3n) {
transition-delay: 250ms;
}
a span:nth-child(3n):after {
transition-delay: 250ms;
}
a span:after {
content: "";
position: absolute;
top: 100%;
left: -1%;
width: 102%;
height: 2em;
background: blue;
transform-origin: top center;
transform: scaley(0.1);
transition: transform cubic-bezier(0.77, 0, 0.175, 1) 250ms;
}
a:hover span {
transform: translateY(-1em);
}
a:hover span:after {
transform: scaleY(1);
}
a:active span {
transform: translateY(0);
transition: transform cubic-bezier(0.77, 0, 0.175, 1) 125ms;
transition-delay: 0 !important;
}
a:active span:after {
transform: scaleY(0.5);
transition: transform cubic-bezier(0.77, 0, 0.175, 1) 125ms;
transition-delay: 0 !important;
}