Hello readers, Today in this blog you’ll learn How to Create amazing colorful shiny button for your websites using HTML & CSS use to improve your website.

There's something about a shiny button that just makes you want to push it. Maybe it's the promise of something new and exciting, or maybe it's the allure of mystery. Whatever the reason, a shiny button is irresistible.

So what's the deal with shiny buttons? Are they really that different from regular buttons?
It turns out that there are a few things that make shiny buttons special. For one, they're a lot more noticeable than regular buttons. They also tend to be a bit bigger, making them easier to find and press.

But the best thing about shiny buttons is that they make your app look more polished and professional. So if you're looking to add a bit of flair to your project, go ahead and add a shiny button or two! 


 To create this program (amazing colorful shiny button). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.  

First, create an HTML file with the name of index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with a .html extension.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <title>Document</title>
    </head>
    <body>
        <button class="button">Button</button>
    </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with a .css extension.


body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; 
    background-color: #222;
  }
  
  .button{
    background: #d1501c;
    color: #fff;
    font: 18px sans-serif;
    padding: 1em 2em;
    border: none;
    border-radius: 10%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    line-height: 30px;
}
  
  .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);
    }
  }

Enjoy coding! Watch also the video tutorial:

Hey, here’s something that might interest you:     

Create an Animated Navbar Menu using JavaScript, HTML & CSS

Create a snow globe with HTML and CSS