Categories
CSS Web development

CSS Shiny Buttons

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 buttons 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">First button</button>
<button class="button1">Second button</button>
<button class="button2">Third button</button>

Step 2.

Add CSS and CSS Animation

body{
  background: pink;
}

.button {
  background: #39CCCC;
  display: inline-block;
  color: black;
  font: 18px Georgia, sans-serif;
  border-radius: 15px;
  top: 150px;
  line-height: 42px;
  padding: 0 2em;
  position: relative;
  left: 10%;
  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;
}

   
.button1 {
  background: #85144b;
  display: inline-block;
  color: black;
  font: 18px Georgia, sans-serif;
  border-radius: 15px;
  top: 150px;
  line-height: 42px;
  padding: 0 2em;
  position: relative;
  left: 10%;
  overflow: hidden;
}
.button1::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);  
}

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

.button2 {
  background: #3D9970;
  display: inline-block;
  color: black;
  font: 18px Georgia, sans-serif;
  border-radius: 15px;
  top: 150px;
  line-height: 42px;
  padding: 0 2em;
  position: relative;
  left: 10%;
  overflow: hidden;
  
}
.button2::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);  
}

.button2: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

Enjoy coding!

Leave a Reply