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.
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.
Complete Code: It is the combination of the above two sections of the code.
- How to create directory with HTML button and PHP ?
- How to create Shaky button using HTML and CSS ?
- How to Create a Transparent button using HTML and CSS ?
- How to create waves on button with CSS and HTML?
- How to create a clickable button in HTML ?
- How to Create Custom Radio Button using HTML and CSS ?
- How to create a button with stitched border using HTML and CSS?
- How to create Neon Light Button using HTML and CSS ?
- How to create an HTML button that acts like a link?
- How to Create an Effect to Change Button Color using HTML and CSS ?
- How to create button to open SMS compose to a phone number using HTML ?
- How to create a radio button similar to toggle button using Bootstrap ?
- How to Create Button in React-Native App ?
- How to Create Custom Shape Button using SVG ?
- How to create a Ripple Effect on Click the Button ?
- How to create button dynamically with click event in Angular ?
- HTML | button Tag
- HTML | DOM button Object
- HTML | DOM Button name Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.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.