<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;}
}
This Pen doesn't use any external JavaScript resources.