May 1st, 2007
Poor man’s 3d button with pure CSS
We previously covered how to make a button with just CSS. In this short howto we will show you how to create a 3d button with just CSS, in what we are calling our “poor man’s 3d button”.
First start off with defining the CSS itself. Place this somewhere inside your <head> </head> tags or in your CSS stylesheet.
<style type=”text/css”>
a.button,
a.button:visited {
color:#ffffff;
display:block;
border:1px solid;
/* normal border color of button */
/* top color - right color - bottom color - left color*/
border-color:#4F657D #000000 #000000 #4F657D;
text-decoration:none;
width:8em;
text-align:center;
height:2em;
line-height:2em;
background:#1d83a6;
font-weight:bold}
a.button:hover {
color:#ff0000;
background:#236277;
position:relative; top:1px;
left:1px;
/* mouse over border color*/
/* top color - right color - bottom color - left color*/
border-color:#000000 #000000 #000000 #000000}
</style>
We’ve put some comments in so you can easily identify where to modify colors for the button. Also note we have called it simply “button” and so you can reference it by using class=”button”.
Now in your make a link with class=”button” like below:
<a href=”http://www.bluechiphosting.com/” mce_href=”http://www.bluechiphosting.com/” title=”my 3d button” class=”button”>3d button yay!</a>
You will end up with a button like this:
3d button yay!
Make a button without an image editor using CSS!Poor man’s banner / ad rotator