Custom Buttons

If you're new here, you may want to subscribe to my RSS feed.

The default buttons in today’s browser are plain. Mostly just a shade of gray, and do not fit with the color scheme of most sites. With the use of the HTML button tag and some CSS, you customize your buttons for your site.

If you look at a default button, you will see that there are three things that make the button it’s unique look.

This is a default button

As you see those three things are the gray background color, and the left and bottom borders. The other thing that a button will have is when clicked it the borders will change. We will also need to also use CSS to control this “effect” with the pseudo class :action. In the pseudo class we can change the top and left borders to match those of the bottom and right borders. Let’s start to create the CSS for a button that fits the color scheme of Now CSS.

First we will need to think of a color that we can use for the background. A color that will fit the site’s theme nicely is a light gray (#F4F4F4). If you look at the default button, you can see that all sides of the button have a border, the top and left border of the button are very close to the shade that the background color is. Since the color we are using already is very light we will use the same color for these borders. The bottom and right borders we will use black (#FFFFFF). For the color of the text we will use a shade of green (#94CB2D) which is also used in the menu bar. Here is the CSS code that we need to create the button with this color scheme.

button{ color: #94CB2D; background: #F4F4F4; border-top: 3px solid #F4F4F4; border-left: 3px solid #F4F4F4; border-bottom: 3px outset #FFFFFF; border-right: 3px outset #FFFFFF; }

You may have noticed that we have used different styles of borders for the top and left, then the bottom and right. The outset style we used for the bottom and right allows those borders to like similar to the default button. You can use a solid border if you choose. You also see that we define the top and left border even though the user will not really see those borders, since they are the same color as the background. The reason for doing this is because if we don’t add the borders, when the pseudo-class :action is enabled, the button will not look as if it is moving on the page.

The pseudo-class part of the CSS will be very similar. The only thing that is going to change are the borders’ styles. The bottom and right borders will now need to be the same color as the background, and the top and left borders will become black. Along with the color changes, the border styles will also change. Both the bottom and right borders will change to solid, while the other two borders’ style will be inset.

button:active{ color: #94CB2D; background: #F4F4F4; border-top: 3px inset #FFFFFF; border-left: 3px inset #FFFFFF; border-bottom: 3px solid #F4F4F4; border-right: 3px solid #F4F4F4; }

By adding these few lines to your CSS you can create buttons that will fit into the theme of your site. This will also make your site have a more professional look, and your users will most likely like the change. Remember, don’t make too much of a change, because your button will still need to look similar to the default button for a user to know that it can be clicked.