JSFiddle - React, Tailwind, and code Playground

HTML

<div>●</div>

CSS

div {
    font-size: 70px;
    font-family: Arial;
    margin: 10px;
    border: solid 2px #75AADD;
    width: 100px;
    height: 100px;
    
    border-radius: 50px;
    
    text-indent: 80px;
    z-index: 2;
}

div:hover {
    text-shadow: 0px 5px 0 #fff, 0 -5px #fff;
}

div:hover::before {
    content: '〇';
    text-shadow: none;
    font-size: 50px;
    line-height: 60px;
    position: absolute;
    top: 28px;
    left: 8px;
    color: #75AADD;
    
    -webkit-animation: burn 2s infinite linear;
       -moz-animation: burn 2s infinite linear;
         -o-animation: burn 2s infinite linear;
            animation: burn 2s infinite linear;   
}

@-webkit-keyframes burn {
    0% { color: #75AADD; }
    50% { color: #407EC8; }
    100% { color: #75AADD; }
}

@-o-keyframes burn {
    0% { color: #75AADD; }
    50% { color: #407EC8; }
    100% { color: #75AADD; }
}

@-moz-keyframes burn {
    0% { color: #75AADD; }
    50% { color: #407EC8; }
    100% { color: #75AADD; }
}

@keyframes burn {
    0% { color: #75AADD; }
    50% { color: #407EC8; }
    100% { color: #75AADD; }
}