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:

1. Let’s start by adding a single button element.

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

Reset margins, set the font family, and style the button with a purple gradient background, some padding, and a border-radius.

Set the position of the button to relative so the shine overlay can be positioned inside it.

* {
    margin: 0;
}
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.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;
}

Output:

2. Now for the shine effect. We use a ::before pseudo-element to create a white diagonal streak. Set it to position: absolute and start it off-screen to the left with left: -100%. Give it a semi-transparent white gradient and a skewX to angle it diagonally. Set a transition on the left so the movement is smooth.

.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;
}

On hover, move left to 125% to slide the streak all the way across and off the other side.

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

Output:

Final Output Code for 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.