CSS For Programmers - Building a Custom CSS Button
CSS For Programmers - Building a Custom CSS Button
Written by David Conrad   
Article Index
CSS For Programmers - Building a Custom CSS Button
State Selectors

 

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, FacebookGoogle+ or Linkedin.

 

Banner


Real World Adversarial Images
09/08/2017

Just when you thought the the adversarial image flaw in neural networks couldn't get any worse someone comes along and shows how to build such images in the real world. Yes, a stop sign can be changed [ ... ]



Storm Over For Teapot Error Code
13/08/2017

When it was proposed that Error Code 418 I'm a Teapot be removed from Golang, Node and ASP.NET, a campaign to save it was quickly launched - and almost instantly successful. 


More News

 
 

 

blog comments powered by Disqus



Last Updated ( Thursday, 23 February 2017 )
 
 

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