Here are only 4 simple steps to creating CSS3 Glossy Animated Button Hover Effects.
- The background 3D gradient layer
- A light overlay on Button (3D CSS Button design)
- Hover Effect on CSS button
- Finishing
That’s all, take your time to go through these points and then you will get a very impressive beautiful buttons CSS.
Complete HTML Source
Here is the complete HTML code which is used to build some DIV’s and a Glossy Button. Check below code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <title>Shiny Glass Button</title> <link rel="stylesheet" type="text/css" href="shinyglassbutton.css"> </head> <body> <a href="#"> <span></span> <span></span> <span></span> <span></span> Button</a> </body> </html> |
The background 3D gradient layer
Here you pick your choice color for the gradient background using CSS. now we will show below code how you can make a Gradient background using CSS.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
body{ margin: 0; padding: 0; height: 100vh; display: flex; justify-content: center; align-content: center; align-items: center; background: linear-gradient(-30deg, #341ee9 0%,#00000a 50%,#dc1010 50%,#000000 100% ); } |
A light overlay on Button (3D CSS Button design)
Now we give the glossy look to the button and make it transparent. Because of transparency CSS, the glossy button takes the background gradient and use site theme.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
a{ position: relative; padding: 20px 50px; text-decoration: none; color: #fff; font-size: 2em; text-transform: uppercase; font-family: sans-serif; letter-spacing: 4px; overflow: hidden; background: rgba(255,255,255,.1); box-shadow: 0 5px 5px rgba(0,0,0.2); } a:before{ content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: rgba(255,255,255,.1); } a:after{ content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent); transition: 0.5s; transition-delay: 0.5s; } |
Hover Effect on CSS3 Glossy Animated Button
Now we create a hovering effect on shining button CSS. Using CSS:: before and:: after property, we create an animated boxed layout on the cool CSS button.
Here check out the below code for more information.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
a:hover:after{ left: 100%; } a span{ position: absolute; display: block; transition: 0.5s ease; } a span:nth-child(1) { top: 0; left: 0; width: 0; height: 1px; background: #fff; } a:hover span:nth-child(1) { width: 100%; transform: translateX(100%); } a span:nth-child(3) { bottom: 0; right: 0; width: 0; height: 1px; background: #fff; } a:hover span:nth-child(3) { width: 100%; transform: translateX(-100%); } a span:nth-child(2) { top: 0; left: 0; width: 1px; height: 0; background: #fff; } a:hover span:nth-child(2) { height: 100%; transform: translateY(100%); } a span:nth-child(4) { bottom: 0; right: 0; width: 1px; height: 0; background: #fff; } a:hover span:nth-child(4) { height: 100%; transform: translateY(-100%); } |
Finishing View
CSS3 Glossy Animated Button Hover Effects.
See the Pen Shiny Glass Button Hover Effects by Bikash Panda (@bikashpanda) on CodePen.
Also Check: Pure CSS3 Animated Car
Happy Coding…!
Was this article helpful?
YesNo