Using some simple css and a little color know-how, he shows you how to turn a square button into a pseudo 3-dimensional button. I’ll take it a step further and add a gradient background image to enhance the lighting effect. Like this…

Web Cash

We can build this button up in a couple of steps. First, we need to make our anchor tag (link) into a block – with some padding and a background.

Web Cash

a.button {
   background: #ab7f20;
   padding: .5em;
   color: white;
   text-decoration: none;
   font-weight: bold;

That gives us a nice, squarish look… kind of like a button. But it definitely looks flat and two dimensional. The next step we’re going to take is to add a gradient background. This will add a nice lighting effect – giving the button a bit of depth.

To do this, we need a background image. I made a gradient image in GIMP (read this tutorial to learn how to create a gradient image like this). Then we need to add the image to the css declaration by changing one line.

Web Cash

a.button {
   background: #ab7f20 url(uploads/2008/01/gradient-button.thumbnail.png)
     repeat-x top;

Notice that the color (#ab7f20) is the same as the second color in the gradient image. This gradient is long enough to color the whole area – but if our button gets too tall, we want it to blend in nicely.

The last thing we need to do is give it some borders – light on the top and dark on the bottom. This will give it the illusion of being hit by the light. It’ll also accentuate the effect of the gradient background image.

Web Cash

a.button {
   border-top: #f6daa3 3px solid;
   border-right: #724f05 3px solid;
   border-bottom: #724f05 3px solid;
   border-left: #f6daa3 2px solid; }
 
a.button:hover {
   border-top: #724f05 3px solid;
   border-right: #f6daa3 2px solid;
   border-bottom: #f6daa3 2px solid;
   border-left: #724f05 3px solid;
}

Notice that the background colors are flipped when you hover over the button. This gives the illusion that you are actually “pressing” the button – just by flipping the way the lighting hits.

You could also use the special “inset” and “outset” border types to cut down on that last css declaration. You lose a little control over the color and light placement, but it gives a pretty decent effect. Like this…

Web Cash

a.button {
   border: #ab7f20 3px outset; }
 
a.button:hover {
   border: #ab7f20 3px inset;}

And that’s all there is to it. Change the colors to your liking, add a custom gradient image, and you’ve got a nifty little 3 dimensional button.

All it takes is some css. No need to create a bunch of fancy images, and it’s easily expandable to accommodate the text inside of your button.

Since I recently switched to Ubuntu Linux, I don’t use Photoshop anymore. GIMP all the way. So this tutorial will show you briefly how to create a gradient image in GIMP and then use it as the background of an html element.

Create a Blank Image (120px x 120px)

First thing – fire up GIMP and create a new image. Usually a gradient background image is 1 pixel wide. For now we’ll create a bigger image so it’s easier to see what we’re doing – 120 pixels by 120 pixels. You can crop the image down to a 1 pixel width later.

Set the Foreground and Background Colors

When you create a gradient, you need to set two colors – the beginning color (usually the foreground) and the ending color (usually the background color). To change these colors, click on the square swatch of the foreground color in your toolbar (see the circled area in the screenshot to the right).

This should bring up a box titled, “Change Foreground Color.” Pick a dark color – I used #981313. Then, click on the Background Color Swatch (the one right behind the Foreground color). Change the background color to a lighter version of your foreground color – I used #f17b7b.

Select the Gradient Tool

Now that you’ve chosen the two colors, you’re ready to create the gradient. Click on the “Gradient” tool – it’s the square that fades from black to light gray. See the screenshot to the right. There are a bunch of options you could customize, but for a standard gradient background image you’re better off leaving them alone.

Draw the Gradient! Then Crop Away

Now you can actually create the gradient by clicking and dragging on your image canvas. Position the tool at the top border of your canvas (if you look in the bottom left, it’ll tell you when you’re over pixel “0″). Hold down the Control button to force GIMP to draw a straight line, and drag the cursor down to the bottom pixel of your canvas.

Let go. Voila! You’ve got a nice gradient image created.

You could use it as-is in your css stylesheet, but it’s usually a good idea to trim your picture to 1px wide. The browser can simply repeat the image across the entire width of the element – so making it wider than 1 px is simply wasting bandwidth. Go ahead and crop the image now, and in the future make your gradient images 1 px wide by whatever height you want.

Now, let’s write the css to use this as a background image for an html element.

.gradient {
  background: #f17b7b url(images/gradient.png)
    repeat-x top; }

There’s four pieces to this shorthand css declaration.

• #f17b7b sets the background color. This is the same as the bottom color in our gradient, so that if the container is taller than the gradient image it seems to blend smoothly.
• url(images/gradient.png) sets our gradient image as the background image. Make sure you change the path to where-ever you uploaded your gradient image.
• repeat-x tells the browser to repeat the image left-to-right for the entire width of the container. This is what makes our 1-pixel background image “stretch” across the entire width.
• top simply tells the background image to align itself to the top edge of the container. Not always necessary, but your better safe than sorry.

And that’s all there is to it. Create an html element with class gradient and it should have your lovely gradient background.

So get to it. Start drawing.

Today, we’ll take a look at how to make this tooltip look a bit nicer – using a gradient background and some extra styling.

To review, here’s the basic styling to create the tooltip. Refer to the original post for an explanation of the CSS/HTML.

a.info span {
    display: none; }

a.info:hover {
    position: relative; }

a.info:hover span {
    display: block;
    position: absolute;
    top: 0;
    left: 0; }

In order to make this look a bit nicer, kind of like this tooltipThis tooltip has a gradient background, some bold-face font, and a nice border on top and bottom., we’re going have to add some more style to a.info:hover span.

First, let’s change the colors a bit, add a nicer border, add some padding, and move the tooltip down about one line.

a.info hover span {
   top: 1.5em;
   padding: 1em;
   border-top: 3px solid #d58700;
   border-bottom: 3px solid #d58700;
   border-left: none;
   border-right: none;
   color: white;
   background: #516898; }

Adding that styling would leave us with this tooltipThis looks a lot nicer, but we still need a gradient background..

I created a gradient image in GIMP. You should be able to do this in your favorite image editing program.

I made the gradient image 120px tall. I figured that’s high enough for the average tooltip, and longer ones will be covered by the standard background color. This background color should be the same as the bottom color of the gradient. That way when the gradient ends… it blends in nicely.

To add the gradient, we’ll change one line in the css declaration for a.info:hover span – the background line.

background: #516898 url
  (images/tooltip-gradient.png) repeat-x top;

Now we’ve got our final tooltipThis should be nicely styled. Looks good to me anyway..

You’ll notice a few things in the background declaration – and these hold true for any time you use a gradient background. I included a color – which is equal to the bottom end of the gradient. This way it can blend in if the tooltip becomes longer than the gradient image.

I included repeat-x – which means that the gradient image will be repeated every 1 px along the x-axis. This let’s you expand the image to the full width of the block, but only have to load a nicely small 1px wide image. I also included top to make sure that the gradient appears all the way to the top of the tooltip’s box.

Well there you have it. Once you get the mechanics of the tooltip down, it’s pretty simple to add extra styling like a gradient background image. All you need to do is create your own gradient and tailor the colors to your own needs.

Happy tool-tipping.