CSS buttons

getfirefox getfirefox

getthunderbird getthunderbird

HTML code for the first two buttons is:

<span class="buttLinks"><a href="http://
www.mozilla.org/products/firefox/"><span 
class="button1"><span class="wp wporange">get
</span><span class="wpdesc">firefox</span></span>
<br><span class="button1"><span class="wpdesc">
get</span><span class="wp wporange">firefox
</span></span></a></span>

CSS code for these buttons is below:

.button1 { border: 1px outset rgb(102, 102, 102);
font-size: small;
height: 1.2em;
}/* declares outside border for whole button*/

.wp { text-transform: uppercase;
padding-left: 1px;
padding-right: 1px;
margin-left: 1px;
margin-right: 1px;
font-family: Times New Roman,Times,serif;
font-size: 95%;
color:
 rgb(102, 102, 102);}/*declares left part of button*/

.wpdesc { color: rgb(255, 255, 255);
background-color: rgb(102, 102, 102);
text-transform: uppercase;
font-family: Times New Roman,Times,serif;
font-size: 95%;
margin-left: 2px;
padding-right: 2px;
padding-left: 2px;
margin-right: 2px;
}/*declares right part of button*/

CSS buttons for N|vu

made withN|vu

made withN|vu

CSS code for these buttons is similar to those above.

Only difference being the color scheme. HTML code for the buttons is given below:

<span class="button1"><span class="wp">made with
</span><span class="wpdesc">N|vu</span></span><br>
<br>
<span class="button1"><span class="wpdesc">made with
</span><span class="wp"><span style="color:
 rgb(153, 153, 255);">N|</span>vu</span></span>

CSS buttons for WordPress

wpwordpress wpwordpress

wpwordpress wpwordpress

wpblog wpblog

wpblog wpblog

wpforged wpforged

wpforged wpforged

WordPress

CSS code for these buttons is similar to those above.

HTML code for WP(square) button is given below:

<div class="button3">
<div class="b3left">wp</div>
<div class="b3right">WordPress</div>
</div>

CSS code used to make the button is given below:

.button3 { border: 1px solid rgb(153, 0, 0);
text-align: center;
font-family: Times New Roman,Times,serif;
width: 4.2em;
}/*This declaration defines the outside border.*/

.b3left { text-transform: uppercase;
margin-left: 2px;
padding-left: 2px;
margin-right: 2px;
padding-right: 2px;
color: rgb(153, 0, 0);
font-family: Times New Roman,Times,serif;
font-size: 240%;
}/*This declaration defines the top part 
of the button.*/

.b3right { margin-left: 2px;
padding-left: 2px;
margin-right: 2px;
padding-right: 2px;
background-color: rgb(153, 0, 0);
color: rgb(255, 255, 255);
margin-bottom: 2px;
font-family: Times New Roman,Times,serif;
font-size: small;
}/*This declaration defines the bottom part 
of the button.*/

The CSS buttons designed above were designed for my own CSS practice. However, if you feel that these are good enough, you are free to copy the code and use them on your webpages. In case you have extra space on your webpage, please do link back to this page. I would be highly obliged.

CSS buttons for Firefox and Thunderbird

CSS buttons for N|vu

CSS buttons for WordPress