<div class="degital-intro">
  <a class="degital-intro-btn">
		<i class="fas fa-play"></i>
  </a>
</div>
html{
  height: 100vh;
	font-family: "Font Awesome 5 Pro";
	font-weight: 900;
}
body{
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content :center;
  height:100vh;
}
a:hover{
  cursor: pointer;
}
.degital-intro{
  position:relative;
}
a.degital-intro-btn{
	height: 115px;
	width: 105px;
	background-color: #fff;
	border-radius: 1000px;
	display: block;
	text-align: center;
	line-height: 115px;
	font-size: 36px;
	color: #ef0060;
	position: relative;
  padding-left: 10px;
  z-index:2;
}
a.degital-intro-btn:hover{
  cursor: pointer;
}
.degital-intro:after,
.degital-intro:before{	
	content: "";
	position: absolute;
	left: -25%;
	top: -25%;
	height: 150%;
	width: 150%;
	border: 2px solid #ef0060;
	border-radius: 100px;
	opacity: 0;
	animation: 1s flairanimationbefore linear infinite;
	-webkit-animation: 1s flairanimationbefore linear infinite;	
}
.degital-intro:before{
	animation-delay: .5s;
}
@-webkit-keyframes flairanimationbefore {
  0%   {transform: scale(0.68); opacity: 1;}
  100% {transform: scale(1.2); opacity: 0;}
}
@keyframes flairanimationbefore {
  0%   {transform: scale(0.68); opacity: 1;}
  100% {transform: scale(1.2); opacity: 0;}
}
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.css

External JavaScript

This Pen doesn't use any external JavaScript resources.