<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.