CSS3 Rocks - Building a Custom CSS Button
Written by David Conrad   
Article Index
CSS3 Rocks - Building a Custom CSS Button
A functional button

 

Beyond the look of it

At this point you might be thinking that CSS is just about applying style, some color and a font change say to elements that match the selector but there is more. You can include state information in selectors and this starts the slow slide of CSS into the area of behavior.

The easiest way to show how much CSS moves into the area of behavior is to demonstrate with the creation of a button. If I asked you how to create a custom button you might well start to think about a JavaScript widget or something similar. However CSS is powerful enough to create a custom button very easily.

The first thing we have to work out is which HTML tag to use for the basis of the button. In most cases the tag of choice is the <a> or link tag. The reason for this odd choice is that the HTML specification says that this is the archetypal clickable object and it supports all of the properties and events that we need for a button or anything that the user can click.

So our custom button is indicated in the HTML as:

<a href="/" class="button">Send email</a>

Notice that we have already ruined HTML as a semantic markup language because it isn't obvious that this <a> tag is a button. This has caused programmers in particular to waste a lot of time trying to figure out where the buttons are in an app when all there seems to be is a long list of apparently useless <a> tags.

Our first task is to customize the button's layout behavior so that it fits in with other elements. We need to allow multiple buttons on a single line. One way of doing this is to float the button left but a better way is to set it to behave as an in-line element that fits in the flow of text and can be organized using line breaks. We also want to retain a block element display area so setting display to inline-block gives use the behavior we need. We also don't want the button's text to be split across multiple lines - this would split the button across lines. So the CSS starts off:

<style type="text/css">
.button{
display: inline-block;
white-space: nowrap;

Next we need to customize the font to be sans serif and we need to remove the standard underlining and color used for link text:

font: bold 15px/20px Arial, Helvetica;
text-decoration: none;
color: #333;

So far we have the text of a button but not its body. All we really have to do to mark out the button is provide some padding around the text and a border - but it looks better with rounded corners:

padding: 8px;
border: 1px solid #777;
border-radius: 2px;

You can also provide a 3d effect by using a graduated fill - light at the top dark at the bottom -as the button's background. The only problem with this is that the graduated fill isn't supported in a standard way across all browsers so we need to use vendor specific tags. For a Mozilla based browser such as Firefox we need:

background-image: -moz-linear-gradient(
top, #eee, #bbb);

You can look up the alternative vendor forms of the linear gradient or simply leave it out.

The button now looks reasonable but you could add drop shadows and other effects to make it look better.

button1

State selectors

Now we have a button that looks like a button but it doesn't seem to do anything when you click it. It doesn't "go in" when clicked. We can fix this with a state selector. These are more property called the user action pseudo-classes. Notice that the addition of such pseudo -classes to the selector mechanism makes CSS so much more than an object initialization language. Now the look of an object can change as the result of a user interaction - CSS is now defining behavior.

The only difficult part of this is working out how to change the appearance of the button to signify that it has been pressed. There are many ways of doing this but they all involve giving the impression of a shadow that appears as the button is pushed in. One of the simplest ways of doing this is to reverse the gradient fill so that it is dark at the top and lighter at the bottom. Using this method with CSS gives:

.button:active
{
background-image: -moz-linear-gradient(
top, #ccc,#eee);
}

The active selector applies that style when the user is interacting with the object by pressing the mouse button down. This creates a reasonable button press animation. A slightly better one is to produce a shadow around the entire rim of the button area:

.button:active
{
box-shadow: 0 0 4px 2px
rgba(0,0,0,.3) inset;
}

 

button2

You can, of course, also set styles for what happens when the user hovers over the button before clicking it. and more.

Where next?

Once you realize the power of CSS to customize the UI you simply have to take it seriously. CSS is the important part of the technology after all when a <a> tag can represent any clickable element of the UI what hope is there for semantic HTML in app design?

You also need to be aware that this entire customization could have been done in JavaScript by manipulating the CSS in code. There is more to the interaction between JavaScript and the CSS than meets the eye.



Last Updated ( Monday, 07 November 2011 )
 
 

   
Copyright © 2014 i-programmer.info. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.