Create a Simple Interactive CSS Button with jQuery

Introduction

Don't you feel annoyed when you see the inconsistencies of submit buttons in different browsers on different platform? Well, I do. The thing is, we can't really duplicate the submit button without the help of javascript, what if the user had javascript disabled? Alright, we will be creating a button that will degrade gracefully. It's a bit tricky and pretty simple.

For IE Users: forget about the CSS rounded border and drop shadow, I put it there just to make it looks nicer. The whole point of this demonstration is to replace the submit menu into something that looks more consistent and nicer. :)

Before we start, let's go through some of the tasks we are going to achieve:

• If javascript is enabled, it will search and replace the submit button that inside the #button div
• The button will have hover, click and loading effect
• Submit the form with javascript by refering the form name from the default submit button

1. HTML

The following is a pretty stardard form structure. 2 text fields, and a submit button. The only thing you have to pay attention is the form name and button name. Button name must be same with the form name because the script will use the button's name (which is also the form name) to submit the form.

<form method="post" action="" name="subscribeForm">
	<fieldset>
		<label>Name: </label><input type="text" class="effect">
	</fieldset>

	<fieldset>
		<label>Email: </label><input type="text" class="effect">
	</fieldset>

	<div id="button">
		<input type="submit" value="Subscribe" name="subscribeForm"/>
	</div>
</form>

2. CSS

There are two things we have to style - the form layout and the css button.

body {
	font-family: arial;
	font-size:12px;
	margin:10px;	
	text-align:center;
}
		
form {
	margin:0 auto; 
	text-align:left;
	width:270px;
	border:1px solid #ccc;
	padding:15px;
	background:#fff;
	border-radius: 10px; 
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px; 
	box-shadow: 0 0 4px #ccc; 
	-webkit-box-shadow: 0 0 4px #ccc; 
	-moz-box-shadow: 0 0 4px #ccc;
}
		
fieldset {
	overflow:hidden;
	border:0;
	height:30px;	
	margin:3px 0;
}
		
	fieldset label {
		display:block;
		width:50px;
		float:left;
		font-weight:700;
		color:#666;	
		line-height:2.2em;
	}
		
	fieldset input {
		float:left;
		border:1px solid #ccc;	
		height: 20px;
		padding:3px;
		width:190px;
		font-size:12px;
	}

	/* form field */
	.effect {
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;	
	}
		
	#button {
		margin-top:10px;
		padding-right:20px;
		text-align:right;	
	}

		#button input {
			margin:0 auto;
		}		



	/* CSS BUTTON  START HERE */
	a.cssSubmitButton {			
		font-size: 12px;
		background: #fff no-repeat 4px 5px;
		display: inline-block;
		padding: 5px 20px 6px;
		color: #333;
		border:1px solid #ccc;
		text-decoration: none;
		font-weight: bold;
		line-height: 1.2em;
		border-radius: 15px;
		-moz-border-radius: 15px;
		-webkit-border-radius: 15px;
		-moz-box-shadow: 0 1px 3px #999;
		-webkit-box-shadow: 0 1px 3px #999;
		position: relative;
		cursor: pointer;
		outline:none;
	}
	
	a.cssSubmitButton:visited {}
	
	/* hightlight the button on mouse over */
	a.cssSubmitButton:hover {
		border:1px solid #333;
	}
	
	/* the animation */
	.loading {
		background-image:url('load.gif') !important;
		color:#ccc !important;	
		-moz-box-shadow: 0 0 0 #fff !important;
		-webkit-box-shadow: 0 0 0 #fff !important;
	}

3. Javascript

Alright, to make it easy to understand I will list down what it does:

1. Inside the #button div, It grabs the value (which will be used as the button caption) and also the name of the button (form name) from the default submit button
2. After all the important data are stored into variable, it removes the button
3. And then, add the Anchor Tag with all the fancy CSS style to the #button div. The Anchor tag will have a REL attr which point to the form
4. Add Click event to the CSS Submit button: When you click on the button, it will add the .loading class and then submit the form (grab the form name from the REL attribute)

That's basically it. Just have to remember you must give the form a name, and then put it in the submit button. After that, the jQuery script will populate all the information to the CSS button.

$(document).ready(function () {

	//Get the value and name from the default submit button
	var value = $('#button input').val();
	var name = $('#button input').attr('name');
		
	//Remove the button
	$('#button input').remove();
	
	//Append the CSS button
	$('#button').html('' + value + '');	
	
	//Click event for the CSS button
	$('#button a').live('click', function () {			
		//Add loading animation
		$(this).addClass('loading');
			
		//submit the form
		$('form[name=' + $(this).attr('rel') + ']').submit();			

		//You can add ajax code here
		
		return false;	
	});
		
});

Okay, what if you want the Ajax instead? It will work better with Ajax call because you will able to see the animation. The code below demonstrate how you use Ajax call. Please note, the php script that called by jQuery is just a dummy php file which will sleep for 3 seconds and does absolutely nothing.

The difference between normal form submission and ajax submission is, you need to move the add loading class to beforeSend section and you will need to remove the loading class after everything is done.

	$('#button a').live('click', function () {			
			
		//You can use default form submission or with the ajax call below
		//In this example, I'm using a dummy php call so that you can see the loading animation
		var link = $(this);
			
		$.ajax({
			url : 'load.php',
			data: '',
			type: 'GET',
			cache: 'false',
			beforeSend: function () {
				//Display the animation after the user click on the button
				link.addClass('loading');					
			},
			success: function () {
				//Reset the button back to default
				link.removeClass('loading');	
				//A notification to indicate the submission is done	
				alert('Submitted');
			}			
		});
			
	});

Conclusion

This is a pretty simple tutorial. However, it's not a full working version, it's just an implementation of submit button replacement. You are free to modify and use it in whatever way you want. I hope you like it and let me know if you have any questions. Subscribe or follow me for more jQuery tutorials :)

AdvertisementWorried about 70-448 exam & microsoft mcp preparation? We offer up-to-dated 642-874 dumps practice questions and 70-432 dumps with 100% exam pass guarantee of 642-067.