Categories
CSS Web development

CSS Shiny Button

Continuing the previous post CSS Buttons as a bonus I would like to show you how to add to your button the shiny effect.

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

*animation opened in the Safari browser.
To see the live output click here.

What do you need to do?

Simply, add HTML and 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:

Enjoy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *