April 24th, 2007
Make a button without an image editor using CSS!
You, like most other people will likely want to have a button or thirty.. on your website! Sometimes making one from scratch is kind of annoying in programs like photoshop etc… when all you want is a button!
We’ll quickly show you the basic of making a button in purely CSS (cascading style sheets) and html.
Example:
To get the results above you first make addition to your CSS file.. or add it to your <head> fields in your html file.
/* CSS BUTTON */
.cssbutton {
/* border color */
background: #00FF00;
padding: 1px;
font-family: Geneva, Vera, Arial, Helvetica, sans-serif;
font-size: x-small;
font-variant : small-caps;
border : 1px solid #AA4422;
}
.buttonleft {
/* text color left*/
color: #f8f8f8;
/* background color left */
background: #AA4422;
padding: 0px 3px 0px 3px;
}
.buttonright {
/* Right side text color*/
color: #000000;
/* Right side background color*/
background: #1D83A6;
padding: 0px 20px 0px 3px;
}
Then you use the following code in your HTML
<span class=”cssbutton”><span class=”buttonleft”>CSS</span><span class=”buttonright”>BUTTON</span></span>
And that’s it… a very simple easy cool looking button. Please note we don’t really want the colors to be this way, we’ve simply placed the buttons in this color so you can see the which elements to change! We’ve added comments to help you identify what colors control what part.
You can change the padding options to play around with different sizes, do what you want with it. Try it out its a nice and slick way to get a colorful addition to your website.
Example:
Hope it helps! Happy serving 
Poor man’s 3d button with pure CSSHow to disable ugly HTML image borders in linksPoor man’s banner / ad rotator
May 1st, 2007 at 10:43 am
[…] 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 […]