CSS For Programmers - Building a Custom CSS Button
Written by David Conrad   
Thursday, 19 January 2017
Article Index
CSS For Programmers - Building a Custom CSS Button
State Selectors
Page 2 of 2

 

cssicon

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:

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

Most modern browsers now support

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

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

button1

The complete CSS in a form that can simply be included in an HTML file is: 

<style type="text/css">
 .button{
  display: inline-block;
  white-space: nowrap;
  font: bold 15px/20px Arial, Helvetica;
  text-decoration: none;
  padding: 8px;
  border: 1px solid #777;
  border-radius: 2px;
  color: #333;
  background-image:linear-gradient(to top,
                                     #eee,#bbb);
 }
</style> 

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:
        linear-gradient(to 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 effect 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.

The complete CSS suitable for inclusion in an HTML file is:

<body>
 <style type="text/css">
  .button{
    display: inline-block;
    white-space: nowrap;
    font: bold 15px/20px Arial, Helvetica;
    text-decoration: none;
    padding: 8px;
    border: 1px solid #777;
    border-radius: 2px;
    color: #333;
    background-image:linear-gradient(to top,
                                    #eee, #bbb);
 }
 
 .button:active {
   box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
  }
 </style>
 <a href="/" class="button">Send email</a>
</body>

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.

 

cssicon

 

Related Articles

jQuery 3 - Selectors 

HTML5/CSS Layout

 

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.

 

Banner

JavaZone - The Conference We Missed
25/10/2024

Amongst the many Java related conferences, this one flew under the radar. A real shame because it had many great sessions.
JavaZone might not be that famous internationally, but it still is the bi [ ... ]


+ Full Story
Uno Announces Platform Studio
19/11/2024

Uno has announced Uno Platform Studio, a suite of productivity tools featuring Hot Design, which they describe as a next-generation Visual Designer for .NET cross-platform apps.


+ Full Story
More News

espbook

 

Comments




or email your comment to: comments@i-programmer.info


<< Prev - Next
Last Updated ( Thursday, 23 February 2017 )