EverWeb Codebox

Buttons Using CSS

Why Not Images?

Images used to be acceptable for website buttons, rollovers and navigation but, with the widespread acceptability of CSS3 there's really no excuse to used them in most cases. Each image added to a webpage not only requires yet another file to download but also creates a one or more browser requests. Buttons using image shadow should be avoided along with rollovers which require two images.

Mobile devices such as iPad and iPhone need pages that will download in under 3 seconds on 3G wirless networks. Mobile websites require several large buttons on each page for navigation and other interactive elements. The use of images for these is extremely detrimental to the websites performance and the Google ranking will suffer as a consequence of slow downloading pages.

HTML

Text
Click Me

<a class="button-round" href="#">Text</a>

<a class="button-rectangle" href="#">Click Me</a>

Button HTML & CSS

Two examples are shown below - one round and the other rectangular with rounded corners.

As can be seen, there's not much to the HTML to create the buttons but the CSS seems a little scary at first sight...

<style type="text/css">

a.button-round {

     display:block;

     width:50px;

     line-height:50px;

     text-align:center;

     border: 2px solid #777;

     background: #800000;

     background: -webkit-linear-gradient(top, #FF0000, #000);

     background: -moz-linear-gradient(top, #FF0000, #000);

     background: -ms-linear-gradient(top, #FF0000, #000);

     background: -o-linear-gradient(top, #FF0000, #000);

     -webkit-border-radius: 50%;

     -moz-border-radius: 50%;

     border-radius: 50%;

     font-size: 18px;

     font-family: Trebuchet MS, Arial, Sans-Serif;

     color: #eee;

     text-decoration:none;

}

a.button-round:hover {

     background: #FF0000;

     background: -webkit-linear-gradient(top, #0000FF, #000);

     background: -moz-linear-gradient(top, #0000FF, #000);

     background: -ms-linear-gradient(top, #0000FF, #000);

     background: -o-linear-gradient(top, #0000FF, #000);

     color: #fff;

}

a.button-round:active {

     background: #FF0000;

     background: -webkit-linear-gradient(top, #0000FF, #000);

     background: -moz-linear-gradient(top, #0000FF, #000);

     background: -ms-linear-gradient(top, #0000FF, #000);

     background: -o-linear-gradient(top, #0000FF, #000);

     color: #fff;

}

</style>

<style type="text/css">

a.button-rectangle {

     display:block;

     width:80px;

     line-height:25px;

     text-align:center;

     border: 2px solid #000;

     background: #1669FF; /* same as top color */

     background: -webkit-linear-gradient(top, #1669FF, #000);

     background: -moz-linear-gradient(top, #1669FF, #000);

     background: -ms-linear-gradient(top, #1669FF, #000);

     background: -o-linear-gradient(top, #1669FF, #000);

      -webkit-border-radius: 10px;

      -moz-border-radius: 10px;

      border-radius: 10px;

      font-size: 15px;

      font-family: Trebuchet MS, Arial, Sans-Serif;

      color: #eee;

      text-decoration: none;     

}

a.button-rectangle:hover {

     background: #FF0000;

     background: -webkit-linear-gradient(top, #0000FF, #000);

     background: -moz-linear-gradient(top, #0000FF, #000);

     background: -ms-linear-gradient(top, #0000FF, #000);

     background: -o-linear-gradient(top, #0000FF, #000);

     color: #fff;

}

a.button-rectangle:active {

     background: #FF0000;

     background: -webkit-linear-gradient(top, #0000FF, #000);

     background: -moz-linear-gradient(top, #0000FF, #000);

     background: -ms-linear-gradient(top, #0000FF, #000);

     background: -o-linear-gradient(top, #0000FF, #000);

     color: #fff;

}

</style>

CSS

Hover & Active

The buttons have been given both hover and active states. Hover is used on traditional websites to give a change of color on mouseover.

Mobile websites don't have hover since no mouse or cursor is used. The active stage happens when the button is tapped. It changes color to signify that the link has been "clicked.

easy

Click the easy button to check out the Button Widget which will make life simpler for non coders...