|CSS For Programmers - Building a Custom CSS Button|
|Written by David Conrad|
Page 2 of 2
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 wasn't initially supported in a standard way across all browsers so there are vendor specific tags as well as the current standard tag.
For example, for a Mozilla based browser such as Firefox we need:
Most modern browsers now support
The button now looks reasonable but you could add drop shadows and other effects to make it look better.
The complete CSS in a form that can simply be included in an HTML file is:
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:
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 effect is to produce a shadow around the entire rim of the button area:
You can, of course, also set styles for what happens when the user hovers over the button before clicking it. and more.
The complete CSS suitable for inclusion in an HTML file is:
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?
or email your comment to: firstname.lastname@example.org
|Last Updated ( Thursday, 23 February 2017 )|