<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css">
<div class="container"><a href="#"><i class="fas fa-play"></i></a><span>Play Video</span></div>
<p>GlitchY-Made-Another-one</p>
body {
background-image: linear-gradient(to right top, #702292, #941991, #b50d8c, #d20584, #eb127a);
background-repeat: no-repeat;
background-attachment: fixed;
background-size:cover;
overflow:hidden;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 50px;
}
a {
text-decoration: none;
background-image: linear-gradient(to right, #6400a4, #5e07b5, #5411c6, #411bd8, #1225eb);
border: 2px dotted white;
color: aliceblue;
border-radius: 50%;
padding: 15px;
position: relative;
}
a::after {
position: absolute;
content: '';
bottom: -7px;
top: -7px;
left: -7px;
right: -7px;
background-color: transparent;
border-radius: 50%;
border: 4px solid #fff;
margin: 0px;
opacity: 1;
transform-origin: center;
animation: anim 800ms linear infinite;
}
a::before {
position: absolute;
content: '';
bottom: -7px;
top: -7px;
left: -7px;
right: -7px;
background-color: transparent;
border-radius: 50%;
border: 4px solid #fff;
margin: 0px;
opacity: 0.8;
transform-origin: center;
animation: anim 800ms linear 400ms infinite;
}
@keyframes anim {
from {
margin: 0px;
opacity: 1;
}
to {
margin: -15px;
opacity: 0;
}
}
span {
color: #fff;
font-family: sans-serif;
font-weight: 600;
margin-left: 20px;
}
p{font-family: 'Poppins', sans-serif;color: #fff;
text-align: center;
line-height: 20pt;
font-size: 15px;}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.