How to create a simple glass button with CSS
Step 1: The background gradient layer
Pick the color you want your button to be, then set the background gradient to go from dark on top to light on the bottom. Also put in a solid background color for older browsers that don't support gradients.
While you're here, format the text to make sure it looks nice with the background.
The CSS:
.glass{
/* background styles */
position: relative;
display: inline-block;
padding: 15px 25px;
background-color: green; /*for compatibility with older browsers*/
background-image: linear-gradient(green,lightgreen);
/* text styles */
text-decoration: none;
color: #fff;
font-size: 25px;
font-family: sans-serif;
font-weight: 100;
}
The HTML:
<a href="#" class="glass">My button</a>
The result so far:
In the above CSS, the position needs to be relative so that you can put the overlay in the right place in the next step.
Step 2: A light overlay
Now the glass should start to look like glass. All you need to do is overlay a gradient that goes from transparent white to more transparent white and stops about halfway down.
The CSS:
.glass:after{
content: '';
position: absolute;
top: 2px;
left: 2px;
width: calc(100% - 4px);
height: 50%;
background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
}
The result so far:
Step 3: The finishing touches
Now that your glass actually looks like glass, you can round the corners, engrave the text, add subtle shadows, and use hover effects.
Try adding the following lines to your .glass class in your CSS:
border-radius: 3px;
box-shadow: 0px 1px 4px -2px #333;
text-shadow: 0px -1px #333;
The first two lines round the corners of your button, and the last line gives the text an engraved look.
Now try adding the following CSS for a hover effect:
.glass:hover{
background: linear-gradient(#073,#0fa);
}
The finished product:
Bonus: The fun part
Now that you have the basic idea of how to make a glass button, you can try changing the colors, sizes, shapes, and more. Maybe you'll make a nav bar, or maybe you'll make some neat icons.