This is my first tutorial so I thought I’d start with something pretty simple. Websites all use buttons of different shapes and sizes. There are many different ways to develop and use use buttons in your websites. Typically they are used to get your attention, and then link to a page once you have clicked it. I’ve learned to develop websites through books, and Google, and when I started needing buttons I checked out different options. There are many tutorials out there, some are pretty good. Some of them can get quite complicated as you add fancy features. In any event here’s my simple approach to website buttons.

Before we get started click the link below, a HTML page with all the buttons in this post should come up in a new tab. I kept all the buttons gray so you can compare the different techniques.

Buttons Tutorial

Button 1 – using the <button> tag

Not much going on here. You just use the html <button> tag and you will get a button around your text. You can however put some CSS styling into the <button> tag if you want. The only other thing to pay attention to is your link styling. I added bold text to the hover state. Here is the code :

Button 2 – basic CSS styled button

This button is styled without the use of an image. Its a basic CSS styled button. Because it is basic CSS it has no gradients or rounded corners. Not too fancy, but a step up from Button 1. Here is the code :

There are four shades of gray used to create the 3D effect. The borders are 4px and solid. In the normal state the bottom and right borders are a darkest gray and the top and left borders are the lightest gray. In the hover state the border colors are reversed and the background is just a bit darker than in the normal state.
The padding style sets up the size of the button around the font size you want to use. This method is very simple and effective. You can create as many styles as you want, different colors, sizes, etc. In fact I think I may add a few of these in the next upgrade of this theme.

Button 3 – basic CSS style with longer text

This button uses the same CSS as Button 2. It’s just created to show that the button is flexible to the length of the text.

Button 4 – CSS3 round corners and shadows

CSS 3 offers a new features that can add some neat style to your buttons. That is the ability to add rounded corners and drop shadow effects. I played with it a little bit and came up with Button 4. Here is the code :

Rather than reverse the borders in the hover state, I changed the effect of the shadow to give the illusion of the raised button being pressed. I reduced the right horizontal offset from 2px to 1px, and the bottom offset from 5px to 2px. Finally I changed the opacity (last digit in the rgba) from 0.8 to 0.5 . The button will appear in IE 7 and IE 8 as a button with no special effects, as I dropped the border change. But the effect is pretty neat so I’m just going to leave it.

CSS3 also has gradients, and I did take a look at how to do a button with gradients, but it seems that there are a lot more compatibility issues, and the coding can get quite involved, so I decided to leave that for a separate post.

Button 5 – CSS with a background image

This is probably the favorite way to incorporate buttons in your website. It involves the use of a sprite image and CSS positioning to show the button in a normal and a hover state. A sprite image is an image of more than one image, in this case two buttons, one for each state.

The video below will show you how to create a two button sprite image using GIMP (www.gimp.org), the popular open sourced image editing software :

The code to for the button is shown below :

The button CSS class (.button5) sets up the button as 150px wide and 40px high. The background image created with GIMP is loaded in the top left corner of the box. Only the top button is shown because of the box dimensions. The hover state image is loaded using the background-position: 0 -40px; statement, which loads the bottom image, ie the hover image for our button. This is the CSS Sprites technique.

This is a very popular technique, you can design any button you want, and load it with CSS.

Button 6 – Sliding Door/Sprites

Sliding doors is another popular CSS technique used in creating menu tabs of different widths. When combined with a Sprite image it can also be used for buttons of different widths. In this example I created a 800px wide x 60px high button for normal and hover states, so the image was actually 800px x 120px. I used the same technique as described in the above video.

I then broke the image into a 780px wide by 60px left side part and a 20px wide by 60px high right side part. I used the rectangle select tool in GIMP, and simply copied the section and then pasted it into a new image.

Here is the code to load the button :

There are lots of tutorials on this but I used the one by Brandon Setter

Button 7 – Sliding Door/Sprite with long text

This uses the same button as the one above only with longer text.

I hope you enjoyed the post. You can download the html and css files for the demo here :