SATYAGAMING01

button {
position: relative;
overflow: hidden;
outline: none;
cursor: pointer;
border-radius: 50px;
background-color: hsl(255deg 50% 40%);
border: solid 4px hsl(50deg 100% 50%);
font-family: inherit;
}

.default-btn,.hover-btn {
background-color: hsl(255deg 50% 40%);
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
gap: 15px;
padding: 15px 20px;
border-radius: 50px;
font-size: 17px;
font-weight: 500;
text-transform: uppercase;
transition: all .3s ease;
}

.hover-btn {
position: absolute;
inset: 0;
background-color: hsl(255deg 50% 49%);
transform: translate(0%,100%);
}

.default-btn span {
color: hsl(0, 0%, 100%);
}

.hover-btn span {
color: hsl(50deg 100% 50%);
}

button:hover .default-btn {
transform: translate(0%,-100%);
}

button:hover .hover-btn {
transform: translate(0%,0%);
}