<button class="btn">Lorem ipsum</button>
.btn {
  position: relative;
  padding: 0.75em 1.25em;
  border: none;
  background: none;
  overflow: hidden;
  font-size: 1.25rem;
  z-index: 0;
  
  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 141%;
    padding-bottom: 141%;
    transform: translate(-50%, -50%) rotate(0deg);
    background: linear-gradient(0deg, rgb(255, 174, 0) 0px, rgb(249, 232, 102) 100%);
    animation: bg-rotate 2s linear infinite paused;
    z-index: -2;
  }
  
  &::after {
    content: '';
    position: absolute;
    background: #fff;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    z-index: -1;
  }
  
  &:hover::before {
    animation-play-state: running;
  }
  
  @keyframes bg-rotate {
    to { transform: translate(-50%, -50%) rotate(360deg); }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.