<div class="btn-wrapper">
<button>Desire Plan</button>
</div>
body {
background-color: #ffb200;
}
.btn-wrapper {
border: 2px solid;
display: inline-block;
padding: 5px;
border-radius: 10000px;
position: relative;
}
.btn-wrapper::before {
content: '';
display: block;
position: absolute;
width: 110%;
height: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ffb200;
animation: rotate 5s normal linear infinite;
}
button {
border-radius: 100000px;
border: none;
padding: 10px;
font-size: 24px;
color: #ffb200;
background-color: #000;
position: relative;
z-index: 1;
}
@keyframes rotate {
0% {
transform: translate(-50%, -50%) rotate3d(0, 0, 1, 0deg);
}
25% {
transform: translate(-50%, -50%) rotate3d(0, 0, 1, 90deg);
}
50% {
transform: translate(-50%, -50%) rotate3d(0, 0, 1, 180deg);
}
75% {
transform: translate(-50%, -50%) rotate3d(0, 0, 1, 270deg);
}
100% {
transform: translate(-50%, -50%) rotate3d(0, 0, 1, 360deg);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.