Facelift to Forms; Part 2: Button - By Jay@Thakar.info

• Download Facelift_Forms_Button - 348.6 KB

Introduction

This is second article in ’Facelift to Forms’series which describes various options to make beautiful, easy to implement and easy to use web forms. In my previous article ’Facelift to Forms; Part 1: TextBox - By Jay@Thakar.info’ we saw various options to make beautiful Textbox, In this article we will be looking at another element ’Button’.

Background

As you already know Button in web forms represents some action. In many cases web forms were designed very poorly where action items (like buttons) were not visible at all; In this article we will see how we can minimize/eliminate few common mistakes and make your (yes developer’s) and application user’s life easy. This article describes various ways to make beautiful (and highly visible) buttons.

Button

As you may agree, purpose of any web form is to collect information and send it to server. Without button it is difficult to send information to server as Button represents action item on form. There are many things which can be done with Button making it more fun and helping for end user and yet easy to implement. As end result a user will only click on a button if it is visible (to application user).

In this article we will use a simple registration form with 2 buttons ’Register’ and ’Clear’.

/*Code: 1. SimpleForm.htm*/
<input id="register" type="submit" value="Register" />
<input id="clear" type="reset" value="Clear" />

Now let’s start giving Facelift to this form.

Magic of CSS

One of most easy and effective way to change appearance of a Button (or any element) is to use CSS. There are few tricks which you can do with CSS to make Button more beautiful. Let’s see some...

/*Code: 2.CSS_Font.htm*/
<style>
...
...
.loginButton
{
    color: #B24F04;
    font-family: "Verdana" ,sans-serif;
}
</style>
</head>
...
...
<input id="register" type="submit" value="Register" 
    class="loginbutton" />
<input id="clear" type="reset" value="Clear" 
    class="loginButton" />

By just applying fonts and changing color now these buttons look slightly better then earlier version. Another exciting thing is to use web fonts

/*Code: 3.Web_Font.htm*/
<style type="text/css">
@font-face
 {
    font-family: Gentium;
        src: url(http://www.princexml.com/fonts/larabie/berylibi.ttf) 
        format("truetype" );
}

.loginButton
{
    color: #B24F04;
    font-family: "Gentium" , serif;
}
</style>
...
...
<input id="register" type="submit" value="Register" class="loginButton" />
<input id="clear" type="reset" value="Clear" class="loginButton" />

Web fonts rendered on Mozilla Firefox

Web fonts on IE

As you can see here we are using fonts hosted on server hence it is not required that given fonts should be installed on client’s computer. If browser does not support 'web fonts' then substitute fonts (sans-serif in this case) will be used. This is one of 'cool' thing to do specially when you want to use some funky fonts and you know for sure that given fonts will not be available on client’s computer. Here is result in different browser from above code.

Now let’s add some borders to these Buttons ...

/*Code: 4.Border.htm*/
<style type="text/css">
...
...
.loginButton
{
    color: #B24F04;
    font-family: "verdana" ,sans-serif;
    border: solid thin #F58F1A;
}
</style>
<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
...
...
<input id="register" type="submit" value="Register" class="loginButton" />
<input id="clear" type="reset" value="Clear" class="loginButton" />
</div>

Here we just changed appearance of buttons to flat by adding solid border. You can experiment here with various border type and various sides to give various effects. Here is another example of using borders

/*Code: 5.Border_ThickLeft.htm*/
<style type="text/css">
...
...
.loginButton
{
	color: #B24F04;
	font-family: "Verdana" ,sans-serif;
	border: solid 1px #F58F1A;
	border-left: 5px solid #F58F1A;
	border-right: 5px solid #F58F1A;
}
</style>

<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
...
...
<input id="register" type="submit" value="Register" class="loginButton" />
<input id="clear" type="reset" value="Clear" class="loginButton" />
</div>

 In above 2 examples we added borders, in second example we applied thin (1px) border to all sides of button and we added thick (5px) border on left & right side of Button. This gives nice visual effect which seems bit different the regular button. There are several other styles of border you can play with like outset, double, groove etc.

Different visual effect based on state

In most cases we want that disabled Button appear differently. Generally there are two ways to apply different visual style to represent disabled buttons.

/*Code: 6.Disabled_Different.htm*/
<style type="text/css">
...
...
.loginButton
{
    color: #B24F04;
    font-family: "Verdana" ,sans-serif;
    border: solid 1px #F58F1A;
    border-left: 5px solid #F58F1A;
    border-right: 5px solid #F58F1A;
}
input[disabled]
{
    font-family: "Verdana" ,sans-serif;
    border: solid 1px gray;
    border-left: 5px solid gray;
    border-right: 5px solid gray ;
    color:gray;
    filter: dropshadow(color=#555555,offX=0,offY=1);
    filter:alpha(opacity=60); /* IE’s opacity*/
    opacity: 0.60;
 }
</style>
<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
...
...
<input id="register" type="submit" value="Register" disabled="disabled" />
<input id="clear" type="reset" class="loginButton" value="Clear" /></div>

Now let’s add some background, Here are few ways we can use background; Let's start with adding solid background...

/*Code: 7.Background_Solid.htm*/
<style type="text/css">
...
...
.loginButton
{
	color: black;
	font-family: "Verdana" ,sans-serif;
	border: solid 1px #F58F1A;
	border-left: 5px solid #F58F1A;
	border-right: 5px solid #F58F1A;
	background-color:#D4E6F7;
}
</style>
<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
...
...
<input id="register" type="submit" class="loginButton" value="Register" />
<input id="clear" type="reset" class="loginButton" value="Clear" />
</div>

You can also use an image as background, There are two most popular visual effects ...

1. Gradient effect
2. Rounded corners

Let's see example.

/*Code: 8.Background_Image.htm*/
<style type="text/css">
...
...
.loginButton
{
	color: black;
	font-family: "Verdana" ,sans-serif;
	border: solid 1px #F58F1A;
	background-image: url("gr.jpg");
}
</style>

<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
...
...
<input id="register" type="submit" class="loginButton" value="Register" />
<input id="clear" type="reset" class="loginButton" value="Clear" />
</div>

/*Code: 9.Background_RoundCorner.htm*/
<style type="text/css">
...
...
.loginButton
{
	background: transparent url(’RoundCornerBtn.png’) no-repeat scroll top right;
	color: white;
	height: 38px;
	border: none;
	width: 130px;
	margin: 0px;
}
</style>

<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
...
...
<input id="register" type="submit" class="loginButton" value="Register" />
<input id="clear" type="reset" class="loginButton" value="Clear" />
</div>

Slide Door Technique for Rounded Corners

After looking at above button a question comes to mind; what if I want to create buttons with dynamic width (i.e. background image gets adjusted based on button’s text). In that case there are several techniques available; Few uses some kind of scripting (i.e. jQuery or JavaScript etc), some uses CSS & HTML combination. We will take a look at one which involves HTML & CSS.

/*Code: 10.RoundCorner_slidedoor.htm*/
<style type="text/css">
...
...
button
{
	border: 0;
	text-align: center;
	padding: 0 12px 0 0;
}

button.submitBtn
{
	background: url(bg_button_right.png) right no-repeat;
}

button.submitBtn span
{
	height: 24px;
	line-height: 24px;
	background: url(bg_button_left.png) left no-repeat;
}

button span
{
	position: relative;
	display: block;
	white-space: nowrap;
	padding: 0 0 0 12px;
}
</style>

<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
...
...
<button id="register" type="submit" class="submitBtn">
<span>Register</span></button>
<button id="clear" type="reset" class="submitBtn">
<span>Clear</span></button>

<button value="submit" class="submitBtn">
<span>Some very logn text</span></button>
</div>

Here we used few things; first instead of using inputtag we used button tag we used buttonbecause it allows span tag inside which is not possible input tag. Here CSS for button takes care of left side of rounded corner and span takes care of right side. Here position: relative; in span will make sure that right side gets displayed after end of left side. We kept 12 px of padding on left and right side this is because of rounded curve of image on left and right where we don't want user to type.

Button with Icon

Adding icon to an image is always a great move as it adds more visual consistency and more focus from user; as you may already know human brain can process pictures faster than text. Let see various ways to add pictures (icons) to buttons.

/*11.Icon_CSS.htm*/
<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
...
...
<button id="register" type="submit" class="submitBtn">
<span><img src="ico_submit.gif" border="0" alt="" 
height="18px" style="vertical-align:middle" /> Register</span></button>
<button id="clear" type="reset" class="submitBtn">
<span><img src="view_refresh.png" border="0" 
    alt="" height="18px" style="vertical-align:middle" />
    Clear</span></button>
</div>

In above code we added a span into button and added image into span. Unlike Input here Button tag allows us to add inner span where you can add Image.

Behavior

Now let’s move to next phase of customization for button, which is behaviors. Just like first section here too we have many different options for customization and add different behaviors.

Hover

/*Code: 12.Hover_CSS.htm*/
<style type="text/css">
...
...
button.submitBtn:hover
{
	background: url(bg_button_rightH.png) right no-repeat;
}

button.submitBtn:hover span
{
	background: url(bg_button_leftH.png) left no-repeat;
}

</style>
<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
...
...
<button id="register" type="submit" class="submitBtn">
<span>Register</span></button>
<button id="clear" type="reset" class="submitBtn">
<span>Clear</span></button>
</div>

Now this is very neat and apparently easy to implement; and we do not use JavaScript or any programming here :).CSS pseudo-classes are used to add special effects to some selectors. we used hover pseudo-class to add mouse over effect on button. It is possible to get same results using JavaScript.

/*Code: 13.HighlighJS_Hover.htm*/
<style type="text/css">
...
...
.loginButton
{
	color: black;
	font-family: "Verdana" ,sans-serif;
	border: solid 1px #F58F1A;
	background-image: url("gr.jpg");
}
	
.loginButton_Hover
{
	font-family: "Verdana" ,sans-serif;
	border: solid 1px #F58F1A;
	background-image: url("grHover.jpg");
}
</style>

<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
...
...
<input id="register" type="submit" class="loginButton" 
	value="Register" onmouseout="this.className=’loginButton’;" 
	onmouseover="this.className=’loginButton_Hover’" />
<input id="clear" type="reset" class="loginButton" 
	value="Clear" onmouseout="this.className=’loginButton’;" 
	onmouseover="this.className=’loginButton_Hover’" />
</div>

In code above in definition of Input we added JavaScript event handlers for onmouseover and onmouseout where in onmouseover we switch css class to loginButton_Hover and on onmouseout we flipped back to loginButton.

Providing Feedback about Action taken

According to one research conducted about page load time and user’s patients concluded that average user can wait approximately ’4 seconds’ for a page to load. Same thing applies to any action done on page like if user clicks on button he/she expects some kind of feedback; you must remember old days of windows forms where upon clicking on button cursor changes to wait (hour glass) cursor. There are various wa    ys for web application developer to provide feedback upon user action.

Displaying Message

One of popular method to provide feedback is to display message / or animated image indicating an action is initiated. In following example we are displaying a message.

/*14.Feedback_Label.htm*/
<script language="javascript" type="text/javascript">
function displayMessage() {
	var divMessage = document.getElementById("div_Message");
	divMessage.style.display = ’’;
	// following line is to simulate wait in real code you
	// may not need to include that; 
	 setTimeout("window.location=’feedback_label.htm’;", 2000); 
	 return true;
}
</script>

<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
...
...
<input id="register" type="submit" class="loginButton" value="Register" 
	onmouseout="this.className=’loginButton’;"
	onmouseover="this.className=’loginButton_Hover’" 
	onclick="return displayMessage();" />
<input id="clear" type="reset" class="loginButton" value="Clear" 
	onmouseout="this.className=’loginButton’;"
	onmouseover="this.className=’loginButton_Hover’" />
<div id="div_Message" style="display: none;">
	Form Submitter, Please wait ...</div>
</div>

Button before clicking.	Button after clicking; Displays message.

In above code initially div_Messageis not visible; but on click event of ’Register’ button we call divMessage which displays a message indicating that you have clicked on button and you may need to wait to see result.

Fade effect on form

Another visual effect you can use is to fade entire form along with displaying message. This is very easy to implement and very effective and entire form changes it’s appearance which is visually more effective technique then just displaying only message.

/*Code: 15.Feedback_dimmer.htm*/
<style type="text/css">
...
...
.opac
{
	opacity: 0.4;
	filter: alpha(opacity=40);
}
</style>

<script language="javascript" type="text/javascript">
function displayMessage() {
	var divM = document.getElementById("div_Message");
	divM.style.display = ’’;
	var dForm = document.getElementById("div_Form");
	dForm.className = "opac"; // apply dimmer effect on entire form
	setTimeout("window.location=’15.Feedback_dimmer.htm’;", 2000);
	return true;
}
</script>

<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9"
id="div_Form">
...
...
<input id="register" type="submit" class="loginButton" value="Register" 
	onmouseout="this.className=’loginButton’;"
	onmouseover="this.className=’loginButton_Hover’"
	onclick="return displayMessage();" />
<input id="clear" type="reset" class="loginButton" value="Clear" 
	onmouseout="this.className=’loginButton’;"
	onmouseover="this.className=’loginButton_Hover’" />
</div>

<div id="div_Message" style="display: none;">
Form Submitted, Please wait ...</div>

Form before button clicked.

Form after button clicked.

As you can see in above code we used dForm.className = "opac"; to apply fade effect on form. This is very effective visual effect to let user know form processing is initiated and user needs to wait;

Preventing Accidents (Double Clicks)

 However in above 2 methods there is a potential problem; above methods cannot prevent user from clicking on button twice; In some cases we need to prevent user from clicking twice (like sites where you place online order; if user by mistake clicks twice same selection may gets order twice; which is not a good idea); following code prevents double clicks.

/*Code: 16.NoDBLClick.htm*/
<style type="text/css">
...
...
.opac
{
	opacity: 0.4;
	filter: alpha(opacity=40);
}
</style>

<script language="javascript" type="text/javascript">
function displayMessage() {
	var divM = document.getElementById("div_Message");
	var bRegister = document.getElementById(’register’);
	var dForm = document.getElementById("div_Form");
	divM.style.display = ’’;
	dForm.className = "opac";
	bRegister.form.submit();
	bRegister.disabled = 1;
	setTimeout("window.location=’16.NoDBLClick.htm’;", 2000);
	return true;
}
</script>

...
...
<input id="register" type="submit" class="loginButton" 
	value="Register" 
	onmouseout="this.className=’loginButton’;"
	onmouseover="this.className=’loginButton_Hover’" 
	onclick="return displayMessage();" />
<input id="clear" type="reset" class="loginButton" 
	value="Clear" 
	onmouseout="this.className=’loginButton’;"
	onmouseover="this.className=’loginButton_Hover’" />
</div>

<div id="div_Message" style="display: none;">
	Form Submitted, Please wait ...</div>

In above case we are first calling bRegister.form.submit();which will execute submit method in this form and then we call bRegister.disabled = 1;which will disable ’Register’ button which will prevent user from clicking it again.

History

Initial Submmision on September 24, 2009.

Summary

 Download Source

As developer if you start thinking about this question "How can I make End User’s life easy?" and implement changes You will make your life easy; In the end it is NOT you who decides how good your application is; it is Application’s Users. Happy Coding :)

If you have any questions, please feel free to contact me at: Jay@Thakar.info