<button class="btn">hover me</button>
body {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
background-image: radial-gradient(#535350, #111);
}
$base-color: darkorange;
@keyframes anim {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
@keyframes anim2 {
0% {
text-shadow: 0em 0em 0px rgba($base-color, 0);
transform: rotateY(0deg);
}
60% {
text-shadow: 0em -4em 0px rgba($base-color, 1);
}
100% {
text-shadow: 0em -8em 0px rgba($base-color, 0);
transform: rotateY(360deg);
}
}
.btn {
position: relative;
cursor: pointer;
border: none;
box-sizing: border-box;
font-weight: bold;
perspective: 200px;
padding: 20px 60px;
text-transform: uppercase;
display: inline-block;
color: white;
font-size: small;
background-color: $base-color;
border-radius: 5px;
transition: all 700ms;
&:after,
&:before {
content: 'great job';
//font-size: large;
transition: all 300ms;
box-sizing: border-box;
opacity: 0;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
padding: 1em;
top: -10%;
left: -10%;
width: 120%;
height: 120%;
border-radius: 6px;
border: 3px solid $base-color;
color: $base-color;
animation-name: anim;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-fill-mode: backwards;
}
&:after {
content: 'goooood!';
color: transparent;
animation-name: anim2;
animation-delay: 1s;
//animation-fill-mode: none;
//animation-duration: 2s;
//animation-iteration-count: 1;
//animation-timing-function: ease;
}
&:hover {
background-color: transparent;
color: transparent;
//transform-origin: bottom center;
//animation-name: anim2;
//animation-duration: 1.5s;
//animation-direction: alternate;
//animation-iteration-count: 1;
//animation-timing-function: linear;
&:before,
&:after {
opacity: 1;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.