<a href="https://dev.to/rahuldkjain">
  <img src="https://d2fltix0v2e0sb.cloudfront.net/dev-badge.svg" alt="Rahul Jain's DEV Profile" height="50" width="50" id="dev-btn">
</a>
<div id="write-btn">Write a post</div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
html, body {
  font-family: 'Open Sans';
  width: 100%;
  height: 100vh; 
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

#write-btn {
  margin: 3%;
  padding: 1% 4%;
  border-radius: 1px;
  background: #1827CE;
  color: white;
  font-size: 16px;
}
gsap.fromTo("#dev-btn", {boxShadow: "0 0 0 0px rgba(90,96,116,0.4)"}, {boxShadow: "0 0 0 10px rgba(90,96,116,0)",
  repeat: -1,
  duration: 1}
           );

164, 170, 244
gsap.fromTo("#write-btn", {boxShadow: "0 0 0 0px rgba(164, 170, 244,0.4)"}, {boxShadow: "0 0 0 20px rgba(164, 170, 244,0)",
  repeat: -1,
  duration: 1}
           );
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js