<div class="ring ring1"></div>
<div class="ring ring2"></div>
<div class="ring ring3"></div>
<div class="ring ring4"></div>
<a href="https://youtu.be/2wL6J7oJbpc">
   Watch Me Code &nbsp;<i class="fa fa-youtube-play" aria-hidden="true"></i> 
</a>
	
body{
    background-color: #ececec;
    padding: 0;
    margin: 0;
}
.ring{
    background-color: #ececec;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    box-shadow: 
    -10px -10px 15px rgba(255,255,255,0.3),
    10px 10px 15px rgba(70,70,70,0.15),
    inset -10px -10px 15px rgba(255,255,255,0.3),
    inset 10px 10px 15px rgba(70,70,70,0.15);
    border: 15px solid #ececec;
    border-radius: 50%;
}
.ring4{
    height: 30px;
    width: 30px;
    animation: glow4 2.5s infinite;
}
@keyframes glow4{
    0%{
        background-color: #ececec;
    }
    20%{
        background-color: #ffad00;
    }
    100%{
        background-color: #ffad00;
    }
}

.ring3{
    height: 120px;
    width: 120px;
    animation: glow3 2.5s infinite;
}
@keyframes glow3{
    20%{
        background-color: #ececec;
    }
    40%{
        background-color: #ffad00;
    }
    100%{
        background-color: #ffad00;
    }
}

.ring2{
    height: 200px;
    width: 200px;
    animation: glow2 2.5s infinite;
}
@keyframes glow2{
    40%{
        background-color: #ececec;
    }
    60%{
        background-color: #ffad00;
    }
    100%{
        background-color: #ffad00;
    }
}

.ring1{
    height: 280px;
    width: 280px;
    animation: glow1 2.5s infinite;
}
@keyframes glow1{
    60%{
        background-color: #ececec;
    }
    80%{
        background-color: #ffad00;
    }
    100%{
        background-color: #ffad00;
    }
}
a{
    color: #282828;
    font-family: "Poppins",sans-serif;
    font-weight: 500;
    position:absolute;
    right:20px ;
    top:20px;
    border:3px solid #282828;
    border-radius: 5px;
    text-decoration:none;
}
a>.fa{
  color: #FF0000;
}
@media screen and (min-width: 451px) {
  a{
    font-size: 18px;
     padding:8px 12px 8px 12px;
  }
}

@media screen and (max-width: 450px) {
  a{
    font-size: 12px;
     padding:5px 8px 5px 8px;
  }
}
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
  2. https://fonts.googleapis.com/css2?family=Poppins:wght@500&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.