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


Libraries For Learning To Code
18/01/2017

Google has announced funding for an initiative that aims to equip librarians with the skills needed to deliver coding programs in public and school libraries across the USA.



Mycroft On Raspberry Pi An Open Source Alexa
19/01/2017

The latest big surprise hit Amazon's Alexa. Voice control seems to be the next big thing, but Amazon makes it hard to extend its reach to really new skills. An alternative is Mycroft, an open source A [ ... ]


More News

 
 
 

blog comments powered by Disqus



Last Updated ( Thursday, 19 January 2017 )
 
 

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