Glossy Button in CSS

Written on January 23rd, 2014
Written within: Coding, CSS

I get excited every time I load up Dreamweaver and start fooling around with CSS. I came from designing in AOLPress, to using tables to make my designs, to custom coding stuff with CSS3. I absolutly love it when you can make just about anything look awesome with CSS3 – it is by far my favorite language to code in.

Making this glossy button is no exception. I would have used Photoshop to make this back in the day and now cause the website to take even loader to acutally load – but with CSS3, we can skip all that. Let’s get started.

Demo

I am a glossy button

Step One

Open up your favorite coding application, I use dreamweaver – It really doesnt matter, as long as you know CSS3 you will be good to go.

Step Two

Lets start off with out HTML code.

<div class="glossy_button">
	<p>I am a glossy button</p>
</div>

You would put this code into the BODY of your HTML/PHP document. Basically, you are styling a DIV, to look like a button, and also adding some basic text in there as well.

Step Three

Time to get started on the CSS. First up is the code for the words.

.glossy_button p {
	text-align: center;
	position: relative;
	z-index: 1;
	font-family:Verdana, Geneva, sans-serif;
}

This code can follow what you are using in your website already. You do not need the font-family, but everything else is pretty important.

Step Four

Next up is the actual button. Let’s get started in styling that. Lets talk about what we are going to do before we code it. We want a pill shaped button, so we will need to worry about the radius, then we want a gradient background, the font to have some sort of shadow to read it better, and a border around the whole thing.

I found an awesome CSS gradient generator online. This is what I used for the background.

.glossy_button {
     width: 270px;
     height: 25px;

     margin: 10px auto;
     position: relative;

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

     background: #94c4fe;
     background: -webkit-gradient(linear, left top, left bottom, 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(to bottom,  #94c4fe 31%,#d3f6fe 100%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94c4fe', endColorstr='#d3f6fe',GradientType=0 );

    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;
}

Step Five

Almost done! Now we have to add the gloss to the button. This is done with another gradient from top to bottom, fading white down, making a smaller width, but adding :before to the end of the class (.glossy_button). The :before selector tells the code to display the code before the div gets started. There is a great example at the w3schools website.

.glossy_button:before {
	content: "";
	width: 260px;
	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, left top, left bottom, 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(to bottom,  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 );
}

You also do not want this to be the same width of your main div and you want to move it over (try to center it).

Step Six

Adding Colors. This is easy, all you have to do is add another background to the actual button as follows.

.glossy_button.pink {
	background: #F0F;
	background: -moz-linear-gradient(top,  #F0F 0%, #FCF 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F0F), color-stop(100%,#FCF));
	background: -webkit-linear-gradient(top,  #F0F 0%,#FCF 100%);
	background: -o-linear-gradient(top,  #F0F 0%,#FCF 100%);
	background: -ms-linear-gradient(top,  #F0F 0%,#FCF 100%);
	background: linear-gradient(to bottom,  #F0F 0%,#FCF 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F0F', endColorstr='#FCF',GradientType=0 );
	border: 1px solid #F0F;
}

You will then add the class to your HTML, like so:

	<div class="glossy_button pink">
		<p>I am a glossy button</p>
	</div>

The best thing about it is you can add as many colors as you want and just insert the color into your HTML.

Below are some more examples of this code at work.

I am a glossy button

I am a glossy button