Creating CSS Buttons

I had a request the other day for some more information on creating buttons without the use of images. Hopefully I can shed some more light on the process.

This particular button is made up of three parts. The first is a <div> called dbdbutton. This <div> will wrap the rest of the button and create the raised-edge design. You don’t have to used the raised edges, but I liked the look so I did. To do the raised edges, try the border-style: outset property in your CSS. Here’s the code I used for this <div>.

.dbdbutton {
color: #000;
background-color: #fff;
border-style: outset;
font-size: 9px;
letter-spacing: 0.00em;
margin: 4px 2px 4px 2px;
padding: 2px 0px 2px 2px;
position: relative;
text-align: left;
width: 153px;
}

The colors are of course up to you. I used default colors of black (#000) on a background of white (#fff). You can use whatever pleases you (and hopefully your readers). The sizes are also up to you. The margin is designed to put some space around the outside of the button, while the padding is used to put some space on the inside of the button. More on that in a minute.

The inside of the button gets a little more tricky. One of the lesser-known functions of CSS is that you can use multiple selectors for each object. Instead of just <div class=”foo”>, you can use <div class=”foo bar”>. In your CSS, you can then have two separate selectors that will combine to render your text. For the left side, I used dbdbl (for dbdbuttonleft) and another selector for the color – in this case, xml to display the white on orange background. Here’s that code.

.dbdbutton .dbdbl {
border: 1px solid #000;
display: block;
margin: 0px 0px 0px 0px;
padding: 0px 0px 1px 0px;
text-align: center;
width: 36px;
}

.dbdbutton .xml {
background-color: #f60;
color: #fff;
}

.dbdbutton a.xml:hover {
background-color: #fff;
color: #f60;
}

First, the dbdbl selector renders the border and the spacing. Then the xml selector changes the colors. The a:hover property will flip the background and foreground colors when you are over the button. This will work in the sidebar buttons if you’d like to see it in action – but not in the example above, since it’s just a static image. As you may be realizing, this method means that I can use the same class on the left side for the size/border, etc, then specify another one for different colors. This is, in fact, exactly what I did.

Finally, the right side of the interior. This one is simple, but again requires some trickiness to get it positioned where you like.

.dbdbutton .dbdbr {
border: 1px solid #000;
display: block;
left: 43px;
margin: 2px 0px 0px 0px;
padding: 0px 0px 1px 2px;
position: absolute;
text-align: left;
top: 0px;
width: 105px;
}

.dbdbutton a.dbdbr:hover {
background-color: #000;
color: #fff;
}

Here we use the position: absolute property. This places the block in a specific position on-screen. In this case, pixel 0px (from the top) and pixel 43px (from the left). It’s important to note that this position is considered absolute, but it is absolute within the container – and that is the dbdbutton container we established first. If you don’t have this outside container, then this will move to the specified position of the container outside that one – or the top of the page, 43px from the left!

Also make a note of that left position – it’s used to make sure it doesn’t overlap the left side of the button. So if you have a larger left side, you’ll need to move the right side, well, to the right. I also specify a hover property to flip the colors when your mouse pointer is over the right side of the button. You could use the “dual selectors” option to change colors on the right, just like the left, but I haven’t done that.

Now that we have the CSS, we just have to specify the code to get the button to display on the page. Here’s what I used to display this particular button.

<div class=”dbdbutton”>
<a class=”dbdbl xml” href=”/index.rdf” title=”Syndicate this Site – RSS 1.0/RDF Feed”>XML</a>
<a class=”dbdbr” href=”http://web.resource.org/rss/1.0/spec/” title=”RSS 1.0/RDF Specification”>RSS 1.0/RDF</a>
</div>

Some notes: watch your widths, and your positioning with the left and top tags. Also make sure you keep the <div> set to display: block if you want the entire block to change colors or be selectable. If you use display: inline, the button will probably work, but you can only select the text – and then only the text will change colors, not the entire background of that block.

I hope this helps – please let me know if more information would be useful!

2 Replies to “Creating CSS Buttons”

  1. I’m not sure what you’re asking – you mean as in “unvisiting” a link, once it’s been used? If so, you need to add a :visited state to the button. The issue is that most browsers only accept that on a link, so it might be a bit challenging, but you could certainly try it!

  2. Is there a way to reset the visited part of the CSS command.

    The reason being I would like to use the buttons as selections and then give the option to reset if wrong.

Comments are closed.