CSS Shiny Button - Lena Design

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.

Demo:

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

Add HTML
Add CSS

Let’s start with HTML:

Step 1.

Add HTML

<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: lenastanley.com

Watch also the video tutorial: