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 )
Other Awesome Articles
- Align Image In Post WordPress 2.7
- CSS Codes To Highlight WordPress Post Background Color.
- Add An Author Bio Box In Frugal Theme
- Add Text And Image Shadows To Your WordPress Post
- How To Highlight Certain Words in Your WordPress Blog
- How To Use The Custom Stylesheet In Your WordPress Theme
- How To Add Colors To Your Theme Sidebar
- Kubrik Theme – Adding Navigation Links
2 Responses to “How To Make Web Buttons”
Comments
Read below or add a comment...
Trackbacks
-
How To Make Web Buttons: Made myself some web buttons without using any background images. It…

If you enjoyed this post, whether it's awesome or lame, consider leaving a comment or 









mm nice one
If u give many designed buttons it will surely add a great value for your post