<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.