How to create Glossy Buttons using CSS3 Gradient

first sight

Hello friends today we gonna learn about How to create Glossy Buttons using CSS3 Gradient. So read this article, How to create Glossy Buttons using CSS3 Gradient step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

Guide: How to create Glossy Buttons using CSS3 Gradient

We’ve covered CSS3 gradients a few times, from linear gradient, radial gradient, and repeating gradient. This time we try to use it features to create a fun effect that previously took a few images to make it work.

In this post, we’re going to make the glossy button effect as shown in the screenshot above with CSS3 gradients and with simple HTML markup.

back to menu ↑

HTML structure

As in other tutorials, we will prepare some essentials first and this time we will only need this linen texture for the background. Then create an HTML document and place the following HTML structure.

Glossy effect with CSS3 gradient

back to menu ↑

Styles

Then we will work with the stylesheet. We will start by adding a background texture in the body, specify the container width and align the text to the center as follows.

body {background: url (‘../ img / ios-linen-white.jpg? new’);}. container {width: 100px; margin: 50px auto;}. glossy a {margin: 6px 0 0 0; text -align: center; display: block; width: 100%; height: 100%; text-decoration: none; color: # 000;}

Then we add some decorative styles to the div with .glossy class, including the border radius, border color and gradient color. There are some useful tools to create CSS3 gradients, such as from Colorzilla. Regarding this gradient, we only mix two colors and adjust the first color stop for 31%.

.glossy {width: 100px; height: 25px;

margin: 10px auto; position: relative;

background: # 94c4fe; background: -webkit gradient (linear, top left, bottom left, color stop (31%, # 94c4fe), color stop (100%, # d3f6fe)); background: -webkit-linear-gradient (top, # 94c4fe 31%, # d3f6fe 100%); background: -moz-linear-gradient (top, # 94c4fe 31%, # d3f6fe 100%); background: -o-linear-gradient (top, # 94c4fe 31%, # d3f6fe 100%); background: -ms-linear gradient (top, # 94c4fe 31%, # d3f6fe 100%); background: linear gradient (down, # 94c4fe 31%, # d3f6fe 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = “# 94c4fe”, endColorstr = “# d3f6fe”, GradientType = 0);

-webkit-border-radius: 25px; -moz-border-radius: 25px; border radius: 25px;

border: 1px solid # 4864a9;

color: # 000; font-size: 0.750em; text-shadow: 1px 1px 0px rgba (255.255.255, .5);

-webkit-box-shadow: 0px 1px 3px 0px rgba (0, 0, 0, .2); box-shadow: 0px 1px 3px 0px rgba (0, 0, 0, .2);

position: relative;}

At this stage, this is what it looks like.

Now we make it more realistic by adding a glossy effect to it, and we add it with: before pseudo-element. Likewise, we will also add some decorative styles such as border radius and gradient colors. But this time, we’ll use the RGBA color format with a low alpha channel for the background colors, as follows.

.glossy: before {content: “”; width: 90px; height: 16px;

display: block; position: absolute; left: 5px;

-webkit-border-radius: 8px; -moz-border-radius: 8px; border radius: 8px;

background: -moz-linear-gradient (top, rgba (255,255,255.1) 0%, rgba (255,255,255,0.7) 8%, rgba (255,255,255.0) 100%); background: -webkit-gradient (linear, top left, bottom left, color stop (0%, rgba (255,255,255,1)), color stop (8%, rgba (255,255,255,0,7)), color stop (100%, rgba (255,255,255, 0))); background: -webkit-linear-gradient (top, rgba (255,255,255.1) 0%, rgba (255,255,255,0.7) 8%, rgba (255,255,255.0) 100%); background: -o-linear-gradient (top, rgba (255,255,255.1) 0%, rgba (255,255,255,0.7) 8%, rgba (255,255,255.0) 100%); background: ms-linear-gradient (top, rgba (255,255,255.1) 0%, rgba (255,255,255,0.7) 8%, rgba (255,255,255.0) 100%); background: linear gradient (down, rgba (255,255,255.1) 0%, rgba (255,255,255.0.7) 8%, rgba (255,255,255.0) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = “# ffffff”, endColorstr = “# 00ffffff”, GradientType = 0);}

And at this stage it looks a lot more fun.

shiny

But as we can see the text is somewhat covered with the gradient of: before pseudo-element. So we have to shift it higher, specifying the z-index higher in the same way.

.glossy p {.glossy a {margin: 6px 0 0 0; text-align: center; display: block; width: 100%; height: 100%;

text decoration: none; color: # 000;

position: relative; z-index: 1;}

Now it looks much better.

shiny

You can also try with other colors. In this example, we’ll add another shiny effect with green. Below are the required CSS codes.

.glossys {background: # 54bc3e; background: -moz-linear-gradient (top, # 54bc3e 0%, # aee850 100%); background: -webkit-gradient (linear, left top, left bottom, color-stop (0%, # 54bc3e), color-stop (100%, # aee850)); background: -webkit-linear-gradient (top, # 54bc3e 0%, # aee850 100%); background: -o-linear-gradient (top, # 54bc3e 0%, # aee850 100%); background: -ms-linear-gradient (top, # 54bc3e 0%, # aee850 100%); background: linear gradient (down, # 54bc3e 0%, # aee850 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = “# 54bc3e”, endColorstr = “# aee850 ″, GradientType = 0); border: 1px solid # 1d6511;}

Finally, you can watch the demo and download the resource below.

  • View demo
  • Download source
back to menu ↑

How to create Glossy Buttons using CSS3 Gradient: benefits

  • The How to create Glossy Buttons using CSS3 Gradient tutorial is free .
  • This guide already helps so many users follow up with interest in a timely manner.
  • The price of the How to create Glossy Buttons using CSS3 Gradient guide is free.

back to menu ↑

Faq

Tutorial summary of How to create Glossy Buttons using CSS3 Gradient

In this guide, we told you about the How to create Glossy Buttons using CSS3 Gradient; please read all steps so that you understand How to create Glossy Buttons using CSS3 Gradient in case if you need any assistance from us, then contact us.

How this tutorial helping you?

So in this guide, we discuss the How to create Glossy Buttons using CSS3 Gradient, which undoubtedly helps you.

What is actual time in which this method complete?

The time to complete the How to create Glossy Buttons using CSS3 Gradient tutorial is 10+ minutes.

What are the supported Device?

PC Laptop or Desktop


back to menu ↑

Final note

I hope you like the guide How to create Glossy Buttons using CSS3 Gradient. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends.

For our visitors: If you have any queries regards the How to create Glossy Buttons using CSS3 Gradient, then please ask us through the comment section below or directly contact us.
Education: This guide or tutorial is just for educational purposes.
Misinformation: If you want to correct any misinformation about the guide “How to create Glossy Buttons using CSS3 Gradient”, then kindly contact us.
Want to add an alternate method: If anyone wants to add more methods to the guide How to create Glossy Buttons using CSS3 Gradient, then kindly contact us.
Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off).
Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.

Compsmag
Logo
Shopping cart