<div class="wrap">
<div class="rocket">
<a>ROCKET
<p class="fire">
<span class="fire__circle"></span>
<span class="fire__burst"></span>
</p>
</a>
</div>
</div>
.wrap{
background-color: page;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
}
.rocket{
text-align:center;
margin:2em auto;
transition:1.5s cubic-bezier(0.68, -0.01, 0.96, 0.38);
a{
text-decoration: none;
cursor:pointer;
position: relative;
font-weight: bold;
display: block;
background-color: tomato;
width:200px;
color:white;
padding:1em 0;
margin:auto;
border-radius:50px;
letter-spacing:2px;
&:after{
content:"";
display: block;
position: absolute;
top:0;
bottom: 0;
right:-32px;
margin:auto;
width:0;
height:0;
border-width:21px;
border-style:solid;
border-color:white white white transparent;
border-radius: 50px;
transition:.3s;
}
.fire{
display: block;
position: absolute;
left: 98%;
top:0;
bottom:0;
margin:auto;
height: 40px;
z-index: 10;
span{
&.fire__circle{
display: block;
width:40px;
height:40px;
border-radius:50%;
box-shadow: 0px 0px 10px #4ba2fb, inset 0px 0px 5px #4ba2fb, inset 0px 0px 15px #4ba2fb;
transform:scale(0);
transition:.2s ease;
position: relative;
}
&.fire__burst{
content: "";
position: absolute;
left:120%;
top: 0;
bottom: 0;
margin:auto;
width:0;
height:35px;
border-top-left-radius:20px;
border-bottom-left-radius:20px;
box-shadow: 0px 0px 10px #4ba2fb, 0px 0px 10px #4ba2fb, 0px 0px 20px #4ba2fb, inset 0px 0px 15px #4ba2fb, inset 0px 0px 10px 0px #4ba2fb;
transform:scaleY(0);
transition:transform .2s ease,width .3s ease .3s;
}
}
}
}
&:hover{
transform:translateX(-90vw);
transition:1.5s cubic-bezier(0.68, -0.01, 0.96, 0.38) .7s;
a{
&:after{
border-top:21px solid white;
border-right:21px solid white;
border-radius: 30px;
right:-3px;
}
.fire{
animation: fireCircle .02s infinite alternate;
span{
&.fire__circle{
transform:scale(1);
}
&.fire__burst{
transform:scaleY(1);
width:200vw;
animation: fireBurst .01s infinite alternate;
}
}
}
}
}
}
@keyframes fireCircle {
100%{
transform:translateX(-4px);
}
}
@keyframes fireBurst {
100%{
transform:translateY(-2px);
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.