Quickly Create a Shiny Button using CSS3 | Code Snippet #21

CSS3 Shiny ButtonCode Snippet #21:  The code today shows how to quickly create a shiny button using CSS3. Get a glossy CSS3 button with the help of :after and :before attributes. 

CSS3 transitions and animations are helpful in achieving amazing animations without having to take the help of jQuery now. These CSS3 transitions can be modified and used cleverly to get a glossy effects on your buttons with very little coding.

Today, we are going to learn how to achieve a shine effect on your buttons or any element you hover your mouse using the CSS3 transition properties.

Check out the demo for shiny button using CSS3 below: (Hover the mouse over the button and check out the shine effect)

The coding(CSS3) behind the Shine Effect on the button is as follows – The Shiny and Glossy Looking CSS3 Button:




We have create a button with border and background using the below code:

Now, we need to add the shiny line to pass through on hover of mouse over the button, this is achieved using the :before property as shown below:

The colour of the shine can be changed by changing the below code from the above code:

Hope you enjoyed this quick code snippet on creating a shiny effect using CSS3.


Vinod Suthersan is a enthusiastic web designer still learning new things on web designing. He loves designing, hunting new designs, blogging, and crazy about Internet. Know more

You may also like...