ARTICLE :
 

Create nice button using HTML and CSS

by Dave Smith on April 9th, 2010

Introduction

Button is one of the most commonly used HTML control in websites. Every website especially dynamic website requires buttons. To create a simple button, it is pretty easy. We can use <input> tag with "type" attribute as either "submit", "button" or "reset" to create any button. This will generate a basic button but these days website designs have become more interactive and rich in user interface. We all would like to have nicer looking buttons. This article explains how we can create nice looking button using just HTML and some cascading style sheet (CSS).

Background

Buttons are used in almost all the websites to submit data, for navigation etc. Buttons had been present in HTML specification from the beginning. But by applying some style sheet to the buttons, we can create nice and professional buttons. Another reason why we want to apply CSS to the button, is because, by default a generic button will be displayed depending on the browser type and operating system (OS) being used by the end-user. So, we can not control how end-user will see the button. But if we apply CSS to the button, end-user will see almost similar looked button in most of the browsers and operating systems. However, this does not guarantee it will look exactly the same, as we all are aware that different browsers and operating systems operate differently.

Usability research shows, it is more probable that end-user will click a button vs. a regular link. Somehow if we convert a link to a button then click-through rate increases. May be it is because buttons are more visible and prominent.

Detail

Creating basic button in HTML is very straightforward and simple. We can just use the HTML built-in <input> tag and add attribute "type" with value "submit", "button" or "reset" to create button. "submit" button displays button and on click submit data in the form using http GET/POST method. Regular "button" displays button but does not submit data on click. We need to add extra logic using some scripting language like JavaScript to make it functional. "reset" button also displays as button and by default on click it will clear all the data in the form.

For example:
<input type= "submit" name= "btnSubmit" id= "btnSubmit" />
<input type= "button" name= "btnRegular" id= "btnRegular" />
<input type= "reset" name= "btnReset" id= "btnReset" />

Adding these buttons in the page, will display generic button based on the browser and operating system.

Button samples BEFORE applying CSS, with different browsers and operating systems:
Windows XP and Internet Explorer:
xp_ie
Windows XP and Firefox:
xp_ff
Windows XP and Opera:
xp_op
Windows 2000 and Internet Explorer:
2k_ie

Now, we can apply some basic CSS and make the button more standard so that it looks good, professional, match your website theme and looks similar / uniform in most browsers and operating systems.

CSS can be defined as separate .css file or included in the HTML page itself. I will not go in detail on how to write CSS. If you are new to style sheet, please go over some article on style sheets.

For this article, to make a nice looking button which looks same across multiple browsers and operating systems, let’s add the CSS in the header section of HTML page itself.

Sample CSS:
<style>
    .customButton
    {
	  /*To define the border around the button*/
        border: 1px solid #CCCCCC; 

	  /*To define background image*/
        background-image: url(bg_white.jpg);

	  /*To define background color for browsers that does not support    
	  background image*/
        background-color: White;

	  /*To define font size*/
        font-size: 11px;

	  /*To define nice cursor with hand pointer*/
        cursor:pointer;	

	  /*To define the specific height of button*/
        height: 25px; 

      /*To define the specific width of the button*/
	    width: 100px; 
    }
</style>


The CSS defined above will add border around the button with a background image, specific font size, height, width and cursor. We can add lot more to the button based on the requirement. But for the purpose of this article, we will add these styles to the button.

One of the important part of creating CSS for buttons is to create background image. We can use any image processing tools like Adobe Photoshop or free tool like Paint.NET to create a background image. For the purpose of this article, we created an image of width 1 pixel and height 22 pixel. Then applied the gray gradient color fading upwards in the image. However, all these specification depends upon how we want the button to look.

Enlarged fading background image:
                           bg_large

Applying CSS class to the HTML button control:
<input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" class="customButton" />
<input type="button" name="btnRegular" id="btnRegular" value="Button" class="customButton" />
<input type="reset" name="btnReset" id="btnReset" value="Reset" class="customButton" />

Button samples AFTER applying CSS, with different browsers and operating systems:
Windows XP and Internet Explorer:
xp_ie_css
Windows XP and Firefox:
xp_ff_css
Windows XP and Opera:
xp_op_css
Windows 2000 and Internet Explorer:
2k_ie_css

With CSS being applied to the HTML button control, now the button looks nicer and it is uniform across most browsers and operating system.

Conclusion

By adding simple style sheet and with just using HTML button, we can have much nicer looking button which is rendered similar across multiple browsers and operating systems.

Download

Click here to download source code

Author:

Profile Photo
Dave Smith
Date: April 9th, 2010

Comments:



Profile Photo
Commented by SBajra
on April 20th, 2010 at 21:57:27 EST
Nice article. Thank you.


Profile Photo
Commented by Anima Bajracharya
on April 20th, 2011 at 18:30:36 EST
Thank you so much.... It is very helpful for me....