HTML CSS Button Hover Effect (Shine)

Simple button hover effect built with HTML and CSS, featuring a smooth shine animation that moves across the button on hover and resets on exit.

Final output:

Final Output Code for Simple HTML CSS Button Hover Effect (Shine):

HTML

<button class="shine-button">Shine Button</button>

CSS

.shine-button {
    background: linear-gradient(135deg, rgb(102, 126, 234) 0%, rgb(118, 75, 162) 100%);
    color: #fff;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 600;
    padding: 1rem 3rem;
    border-radius: .875rem;
    border: 0;
    position: relative;
}

.shine-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent 0%,
            rgba(255, 255, 255, 0.08) 20%,
            rgba(255, 255, 255, 0.45) 50%,
            rgba(255, 255, 255, 0.08) 80%,
            transparent 100%);
    transform: skewX(-15deg);
    transition: left 1s ease;
}

.shine-button:hover::before {
    left: 125%;
}

If you have any doubts or stuck somewhere, you can reach out through Coding Yaar's Discord server.