<html>
<button class="plane-send">
<i class="material-icons" data-content="send">send</i>
</button>
</html>
html {
font-size: 14px;
background-color: #f1f1f1;
position: relative;
height: 100vh;
width: 100vw;
}
@keyframes rotate-the-funk {
0% {transform:rotate(360deg);}
50% {transform: rotate(0deg)}
100% {transform: rotate(-360deg)}
}
@keyframes shadow {
0% {transform: scale(1) translate(-20%, -10%);}
25% {transform: scale(0.5) translate(-20%, -10%);}
50% {transform: scale(1) translate(-20%, -10%);}
75% {transform: scale(0.5) translate(-20%, -10%);}
100% {transform: scale(1) translate(-20%, -10%);}
}
button {
font-size: 2.85rem;
background-color: #186b49;
border:0;
border-radius: 0.5rem;
position: absolute;
left:50%;
top:50%;
overflow: hidden;
border-bottom:4px solid #10452f;
transform: translate(-100%,-100%);
transition: 1s border, 0.75s transform;
.material-icons {
transform: rotate(360deg);
position: relative;
color: white;
position: relative;
font-size: 50px;
padding: 2.75rem 3rem 2rem 4rem;
transform-origin: top center;
&:before {
content:attr(data-content);
position: absolute;
color: #166142;
left: 50%;
top:50%;
transform: scale(1) translate(-20%, -10%);
z-index:-1;
transform-origin: bottom center;
}
}
&:hover {
border-bottom: 4px solid #186b49;
transform: translate(-100%, calc(-100% + 2px));
.material-icons {
animation: rotate-the-funk 2.25s forwards;
&:before {
animation: shadow 2.25s forwards;
}
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.