Shiny Button on Hover

Sun Dec 30 2018

The main idea behind shine button on hover is the overlay. What we need is just linear gradient that can overlay the button to make it looks shiny. So to create our shiny button, we can break down our component into the button, overlay and animation.

Button

This is just basic button, we just need to set its position to relative because we are going to use pseudo-element with absolute position. You can choose your own background, box-shadow, etc.

.btn {
  border: none;
  position: relative;
  overflow: hidden;
  padding: 0 2rem;
  font-size: 1rem;
  line-height: 1.5;
  height: 40px;
  min-width: 100px;
  font-weight: 500;
  cursor: pointer;
  background: linear-gradient(47.79deg, #0DABE3 0%, #008CD7 100%);
  box-shadow: 0px 9px 30px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  color: white;
  letter-spacing: .5px;
  transition: background-color .3s ease;
}  

Overlay

The overlay is the part that makes our button shining. It is a linear gradient from transparent to white. We only need the shiny a small part of the gradient so we need to adjust the linear gradient. We rotate the overlay to make it looks real, like the sun is shining the button from the top left corner, if we rotate our overlay then our button will not be covered by our overlay, so just increase its width and height so that it can cover up all the button. We can use pseudo element before or after for our overlay.

.btn::after{
  content: "";
  position: absolute;
  top: 50%;
  left: -120%;
  width: 150%;
  height: 650%;
  opacity: 0;
  transform: rotate(45deg);
  background: rgba(255, 255, 255, 0.13);
  background: linear-gradient(
    to top, 
    rgba(255, 255, 255, 0.1)0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.3) 85%,
    rgba(255, 255, 255, 0.8) 95%,
    rgba(255, 255, 255, 0) 100%
  );
}

Animation

The next thing is to make sure the overlay is on the button only if the button is hovered. We can do this by using css translate to move our overlay to the outside the button and when it is hovered move it back to the original position. Try to use chrome devtools to get the best position of the overlay so that the shiny button looks gorgeous.

.btn:hover::after{
  opacity: 1;
  top: -180%;
  left: -40%;
  transition-property: left, top, opacity;
  transition-duration: 0.7s, 0.7s, 0.15s;
  transition-timing-function: ease;
}

That's our shiny button! You can check the Demo here