Trending Now

Create Shiny Button using CSS – Stunning CSS

thumbnail
CSS
inpows

Create Shiny Button using CSS – Stunning CSS

In this tutorial, you will learn how to create shiny button using CSS. The CSS to create the shiny button is shown in below:

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #282c34;
}

button {
  position: relative;
  height: 60px;
  border-radius: 5px;
  background-color: #0089ab;
  box-shadow: 2px 2px 0 #fff;
  border: 1px solid #fff;
  padding: 0 30px;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  outline: none;
  transition: all .2s cubic-bezier(.21,-0.67,.76,1.63);
  
  &:hover {
    height: 80px;
    font-size: 30px;
    padding: 0 40px;
    box-shadow: 5px 5px 0 #fff;
    
    &:after {
      animation: shine 1s .2s ease-in-out forwards;
    }
  }
  
  &:after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    right: auto;
    width: 50%;
    height: 200%;
    background: linear-gradient(90deg, rgba(209,112,60,0),rgba(255,255,255,0.5) 50%,rgba(209,112,60,0));
    transform: rotate(-30deg);
  }
}

@keyframes shine {
  100% {
    transform: rotate(-30deg) translate(320%, 120%);
  }
}

The full code is like below:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #282c34;
}

button {
  position: relative;
  height: 60px;
  border-radius: 5px;
  background-color: #0089ab;
  box-shadow: 2px 2px 0 #fff;
  border: 1px solid #fff;
  padding: 0 30px;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  outline: none;
  transition: all .2s cubic-bezier(.21,-0.67,.76,1.63);
  
  &amp;:hover {
    height: 80px;
    font-size: 30px;
    padding: 0 40px;
    box-shadow: 5px 5px 0 #fff;
    
    &amp;:after {
      animation: shine 1s .2s ease-in-out forwards;
    }
  }
  
  &amp;:after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    right: auto;
    width: 50%;
    height: 200%;
    background: linear-gradient(90deg, rgba(209,112,60,0),rgba(255,255,255,0.5) 50%,rgba(209,112,60,0));
    transform: rotate(-30deg);
  }
}

@keyframes shine {
  100% {
    transform: rotate(-30deg) translate(320%, 120%);
  }
}
</style>
</head>
<body>
 
<h2 style="color: white;">Shiny Green Button - Stunning CSS </h2>
<br>
<button>Hover me!</button>
</body>
</html>

When you open the file at browser, the result will be:

Related Posts

Back To Top