How to create a shinny button using HTML and CSS ?

Buttons are undoubtedly one of the most important components of any website or app. A button should be designed in such a way that it stands out of the other component so that it is becoming clear to the user where to click and what is the button used for. There are infinite ways in which a button can be styled. We will be looking at how to create a shinny button. You all might have seen light moving from one end to another and when it gets reflected on some shinny surface. We will be implementing the same thing on mouse-hover.

Approach: The approach is to use pseudo selectors before and after selectors.Using before we will be making strip kind of effect and using after we will make sure it move back and forth give it a reflection kind of look which makes our button look shinny.

HTML Code: In this section, we have created a button.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
    "width=device-width, initial-scale=1.0" />
    <title>Gradient Text</title>
  </head>
<body>
    <button>GeeksForGeeks</button>
  </body>
</html>

chevron_right


CSS Code:For CSS, follow the below given steps.

  • Step 1: First do some basic styling of button like a background some and border-radius.
  • Step 2: Now use inset shadow property to give a shadow to the inside of the border of button.
  • Step 3: Now use before selector to create a strip. The trick is to use width less than the actual width of the button and height equal to the actual height of the button. The use of skew function is completely optional, you can skip if you want to. We have used it to have a slightly skewed strip.
  • Step 4: Now use hover to move the strip to the left.
  • Step 5:Repeat step 3 and 4 with after selector just change the width to negative value to move the strip back to it’s original position.

Tip:You can use some line and length spacing to make some room around the text of the button to give it a more clear look.



filter_none

edit
close

play_arrow

link
brightness_4
code

<style>
  button {
    position: absolute;
    top: 40%;
    left: 40%;
    width: 200px;
    height: 60px;
    text-align: center;
    background: black;
    font-size: 24px;
    color: white;
    font-family: "Gill Sans", "Gill Sans MT"
      Calibri, "Trebuchet MS", sans-serif;
    border-radius: 60px;
    border: 4px solid black;
    box-shadow: inset 0 0 30px rgb(97, 96, 96);
  }
 
  button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10px;
    width: 70%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    transition: 0.5s;
    transform: skewX(-15deg);
  }
  button:hover::before {
    left: 190px;
  }
 
  button::after {
    content: "";
    position: absolute;
    top: 0;
    left: -70px;
    width: 50px;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    transition: 0.5s;
    transform: skewX(-15deg);
  }
  button:hover::after {
    left: 190px;
  }
</style>

chevron_right


Complete Code: It is the combination of the above two sections of the code.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
    "width=device-width, initial-scale=1.0" />
    <title>Gradient Text</title>
  </head>
  
  <style>
    button {
      position: absolute;
      top: 40%;
      left: 40%;
      width: 200px;
      height: 60px;
      text-align: center;
      background: black;
      font-size: 24px;
      color: white;
      font-family: "Gill Sans", "Gill Sans MT", 
        Calibri, "Trebuchet MS", sans-serif;
      border-radius: 60px;
      border: 4px solid black;
      box-shadow: inset 0 0 30px rgb(97, 96, 96);
    }
  
    button::before {
      content: "";
      position: absolute;
      top: 0;
      left: 10px;
      width: 70%;
      height: 100%;
      background: rgba(255, 255, 255, 0.1);
      transition: 0.5s;
      transform: skewX(-15deg);
    }
    button:hover::before {
      left: 190px;
    }
  
    button::after {
      content: "";
      position: absolute;
      top: 0;
      left: -70px;
      width: 50px;
      height: 100%;
      background: rgba(255, 255, 255, 0.1);
      transition: 0.5s;
      transform: skewX(-15deg);
    }
    button:hover::after {
      left: 190px;
    }
  </style>
  <body>
    <button>GeeksForGeeks</button>
  </body>
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.