JSFiddle - React, Tailwind, and code Playground

by cchana

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<button>
<i class="fas fa-bell fa-2x"></i>
</button>

CSS

button {
  background: radial-gradient(#F6F7F9 99%, #FFF 100%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1% 1%;
  border: 1px solid #DADEE1;
  border-radius: 5px;
  padding: 10px 20px;
  transition: background-size 0.3s;
}

button:hover {
  animation: AnimationName 1s ease infinite;
  background-size: 101% 101%;
}

/*@-webkit-keyframes AnimationName {
    0%{background: radial-gradient(#DADEE1 1px, #FFF 2px);}
    100%{background: radial-gradient(#DADEE1, #DADEE1);}
}*/