Сделать красивую кнопку в виде картинки

<style>
  .beauty-button {
    width: 40px;
    height: 40px;
    background: url('https://placekitten.com/40/40') no-repeat center;
    border-radius: 50%;
    border: 10px solid palegreen;
    transition: all .2s;
    cursor: pointer;
  }
 
  .beauty-button:hover {
    box-shadow: 2px 4px 4px rgba(0, 0, 0, .2);
    transform: translateY(-2px);
  }
 
  .beauty-button:active {
    box-shadow: none;
    transform: translateY(-1px);
  }
 
  .beauty-button .inner-shadow {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transition: box-shadow .2s;
    transform: scale(1.5);
  }
 
  .beauty-button:active .inner-shadow {
    box-shadow: inset 2px 2px 2px rgba(0, 0, 0, .2);
  }
 
  .beauty-button.bored .inner-shadow {
    animation: bored 2s infinite;
    border: 5px solid palegreen;
    transform: translate(-5px, -5px);
  }
 
  @keyframes bored {
    0% {
      transform: translate(-5px, -5px);
    }
 
    100% {
      transform: scale(2) translate(-3px, -2px);
      opacity: 0;
    }
  }
 
</style>
<div class="beauty-button">
  <div class="inner-shadow"></div>
</div>
<script type="text/javascript">
  (function() {
    const DELAY = 3;
    const btn = document.querySelector('.beauty-button');
    let interval = setTimeout(function() {
      btn.classList.add('bored');
    }, DELAY * 1000);
    btn.addEventListener('mouseover', function() {
      clearInterval(interval);
      btn.classList.remove('bored');
    });
    btn.addEventListener('mouseout', function() {
      interval = setTimeout(function() {
        btn.classList.add('bored');
      }, DELAY * 1000);
    });
  })();
 
</script>