// Internet Duct Tape

CSS Tip: Building 3D Buttons with CSS for the Sandbox Theme

Posted in CSS and Web Design, Technology by engtech on June 26, 2007

Yes, it’s another post on CSS design with Sandbox. Feel free to skip.

One of the nice/painful things about designing for the Sandbox WordPress theme is that it forces you to use CSS to do the things you want to do. There’s no sneaking in there to tweak the underlying structure to get more convenient selectors, it’s CSS or nothing.

An often requested tip is how to do 3d buttons for the menu bar at the top of the page. It’s done using the common “sliding door” technique where one image is the front plus middle, and another image forms the end. I’ll be using the images and technique from the Dark Liquidcard 2.0 theme by Jori Avlis in this example, along with the Sandboxed example blog.

Image Is Everything

The starting point is to create two graphics for your 3d buttons. One image will have the left-and-middle portion and the other will have only the right portion. If you want the button to look different when it is highlighted (or when that page is selected), then put the highlighted version in the same image file right underneath it! That way the entire image is downloaded once and there isn’t a delay the first time a user hovers over the button.

3d menu button for blog theme

3d menu button for blog theme

In these images the button is 46 pixels high.

Getting Started

Here is what the menu looks like without any CSS:

sandbox theme menu unstyled

We’ll start off by applying some basic styles: turn off the list style, remove any padding that might get in the way.

div#menu ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 46px;
}

sandbox theme menu unstyled

Adding the 3d Buttons

Now we’ll add the 3d buttons as background images. We’ll start with the left-and-middle button first. It will attach to the list element (LI). You will have to adjust the padding so that the text is centered properly with respect to the image. Float left will change the orientation of the list. (Note: I changed the text color to white so that it would show up against the image)

div#menu ul li {
	float: left;
	background: url(http://i115.photobucket.com/albums/n296/engtechwp/website/left.png)
		no-repeat left top;
	padding: 10px 0px 12px 10px;
}

add 3d button to menu using css in wordpress theme

Now add the right button. It will attach to the link anchor within the list element (LI A). Again, take care with the padding so that the text is centered properly.

 div#menu ul li a {
	background: url(http://i115.photobucket.com/albums/n296/engtechwp/website/right.png)
		no-repeat top right;
	padding: 10px 25px 12px 10px;
}

add 3d button to menu using css in wordpress theme

Adding a Hover Effect

Now we want to show the hover effect. This is done by shifting the background image down 46 pixels. We’ll also disable the underline effect by turning off text-decoration.

div#menu li:hover {
  background-position: 0% -46px;
}

div#menu li a:hover {
	text-decoration: none;
}

div#menu li:hover a {
	background-position: 100% -46px;
}

add 3d button to menu with hover effect using css in wordpress theme

Download the CSS File

You can download the code for this CSS example

One Response

Subscribe to comments with RSS.

  1. DespairsRae said, on February 24, 2008 at 10:45 pm

    Can this same coding apply to ChaoticSoul for WordPress?


Comments are closed.

Follow

Get every new post delivered to your Inbox.

Join 285 other followers

%d bloggers like this: