Web development

CSS Shiny Button

CSS Shiny Button

We’ll create a button and the shine effect using only pure CSS:

*animation opened in the Safari browser.
To see the animation on the website click here.


To create the CSS Shiny Button follow the steps below and watch the video tutorial:

  1. Add HTML
  2. Add CSS

Let’s start with HTML:

Step 1.


<button class="button">Button</button>

Step 2.

Add CSS and CSS Animation

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; 
  background-color: #2b2d42;

.button {
  background: #8d99ae;
  color: white;
  font: 18px Georgia, sans-serif;
  line-height: 42px;
  padding: 1em 3em;
  position: relative;
  overflow: hidden;

.button::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  background: linear-gradient(to bottom, rgba(230, 175, 145, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0)); 
  transform: rotateZ(60deg) translate(-5em, 7.5em);  

.button:hover::after, button:focus::after {
  animation: sheen 1.5s forwards;

@keyframes sheen {
  100% {
    transform: rotateZ(60deg) translate(1em, -9em);

To see the live output visit:

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Button Fill Effect on Hover

Read More/ Read Less Button

Scroll To Top Button (smooth scroll effect)