How To Make Web Buttons

Made myself some web buttons without using any background images. It is made possible by the latest standard in CSS called CSS3. However, till today, Internet Explorer does not support this. These tutorials have been around for quite sometime, so it is nothing new or innovative on my part. I just took the codes and planted them in my stylesheet.

For those who are new, they might have a tough time understanding those tutorials which are mostly written by techies and geeks who tends to go into a lot of technical details when writing their tips. They seldom consider the fact that there are millions out there like me who do not understand a word they are writing.

So for the benefit of those who wants to be spared the torture of trying to figure out what is what, just follow my way. Copy and paste the strings of codes below anywhere in your stylesheet

…start copy…
.button{
width: 120px;
height: 24px;
padding: 5px 16px 3px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border: 2px solid #ccc;
position: relative;

font-family: Lucida Sans, Helvetica, sans-serif;
font-weight: 800;
color: #fff;
text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

.aqua{
background-color: rgba(60, 132, 198, 0.8);
background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9)));
border-top-color: #8ba2c1;
border-right-color: #5890bf;
border-bottom-color: #4f93ca;
border-left-color: #768fa5;
-webkit-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
-moz-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px; /* FF 3.5+ */
}

.button .glare {
position: absolute;
top: 0;
left: 5px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
height: 1px;
width: 142px;
padding: 8px 0;
background-color: rgba(255, 255, 255, 0.25);
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
}
…end….

When posting or when you have a need to use the buttons, wrap all your text or links with the classes you have just inserted in your stylesheet.

In the example here, I have hyperlinked the text to my feed account so it becomes a SubScribe button.

<div class="button aqua">
<div class="glare"></div>
<a href="http://feeds.feedburner.com/BlogGigs"> SUBSCRIBE FEEDS </a>
</div>

The result will look like this

If you want diffeent color buttons for different purposes, just copy the whole bunch od CSS codes above, give it a new selector name or a div name than change the backgorund color or whatever you want to change.

Have fun with your buttons!

(Codes from GirlieMac)