DEV Community

Designyff
Designyff

Posted on • Originally published at designyff.com

Button with shine animation - Step-by-step guide

Shiny button

HTML

For HTML we have only one button element.



<button>Button</button>


Enter fullscreen mode Exit fullscreen mode

CSS

For CSS, first we'll style the button.

We'll remove border and round it by 1 pixel.

Then we'll set background to green, add some paddings, hide everything that overflows and set position to relative.



button {
    border: none;
    border-radius: 1px;
    padding: 5px 20px;
    background: #00ffb3;
    position: relative;
    overflow: hidden;
}


Enter fullscreen mode Exit fullscreen mode

Now we'll style the before pseudo element. This element will create shine effect.

We'll set content and position to absolute with full height and 100 pixels width.

Background will be linear gradient, rotated by 120 degrees, with white color between two transparent ones.

We'll set top to 0 and left to -100 pixes (element's width).



button:before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100%;
    background-image: linear-gradient(
        120deg,
        rgba(255,255,255, 0) 30%,
        rgba(255,255,255, .8),
        rgba(255,255,255, 0) 70%
    );
    top: 0;
    left: -100px;
}


Enter fullscreen mode Exit fullscreen mode

Now we'll create animation.

We'll simply set left property to -100 pixels on zero percents, and to 100 percents on 20 percents of the animation.

Also, we'll set 100% to 100 percent of the animation, so that the element doesn't move back to it's original position.



@keyframes shine {
    0% {left: -100px}
    20% {left: 100%}
    100% {left: 100%}
}


Enter fullscreen mode Exit fullscreen mode

Now we'll add the animation to before pseudo element, with 3 seconds duration, infinite, linear.



button:before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100%;
    background-image: linear-gradient(
        120deg,
        rgba(255,255,255, 0) 30%,
        rgba(255,255,255, .8),
        rgba(255,255,255, 0) 70%
    );
    top: 0;
    left: -100px;
    animation: shine 3s infinite linear; /* Animation */
}


Enter fullscreen mode Exit fullscreen mode

And that's it.

You can find full code with video tutorial here.

Thank you for reading. ❤️

Top comments (1)

Collapse
 
forfrontend profile image
ForFrontend

I like your tutorial. I believe adding this link to your article would be immensely helpful for readers interested in exploring additional examples of CSS Shine Effects.