How to create a simple glass button with CSS

What to expect
Good news. There are only 3 steps to creating a CSS glass button:
  1. The background gradient layer
  2. A light overlay
  3. Some finishing touches
That's it. Take a few minutes to go through this, and you'll be impressing everyone with glossy buttons, icons, and other things that go on pages. Let's get started!

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:

				/* 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;


			<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:

				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:

				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.

Examples of buttons and icons: