styles.css

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.wrapper{
    min-height: 100vh;
    height: 100vh;
    width: 100%;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(150deg, rgb(13, 2, 43) 5%,rgb(45, 15, 80));
}

.container{
    height: 20%;
    width: 40%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 2rem;
}

.btn{
    height: 45%;
    width: 25%;
    cursor: pointer;
    font-size: 2rem;
    padding-bottom: 2.45rem;
    background-color: transparent;
    color: white;
    filter: blur(1px);
    animation: rothue 1700ms ease-in-out alternate infinite;
    transition: transform 200ms linear;
    border-radius: 1rem;
    outline: none;
}

.btn:hover{
    filter: blur(0px) drop-shadow(2px 2px 10px rgb(17, 3, 68));
    transform: scale(1.05,1.05);
    outline: 1px solid yellow;
}

.value{
    font-size: 2rem;
    color: white;
}

@keyframes rothue {
    to{
        backdrop-filter:hue-rotate(25deg);
    }
}