<button>
Try Premium
</button>
/* From uiverse.io by @ToshihideMiyake */
button {
padding: 1rem 4rem;
border-radius: 100vmax;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5rem;
background: linear-gradient(45deg, #DAAF08 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #DAAF08 90% 100%);
background-size: 800% 400%;
animation: gradient 5s infinite cubic-bezier(.62, .28, .23, .99) both;
color: #fff;
border: 0;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
body{
background-color:#333333;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.