Create a Simple Interactive CSS Button with jQuery

Create a Simple Interactive CSS Button with jQuery


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.

CSS Submit button layout
<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 :)

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

14 comments

kevin Admin
Wed, 28th April 2010
Hi Orson, sorry, I should have stated earlier. I figured you were talking about the rounded border and drop shadow. Yes, please ignore that, I just wanna make it looks better. The whole point of this tutorial is to replace the submit button with a more consistent css button and also will still work even if the javascript is disabled. Reply
webanddesigners
Wed, 28th April 2010
Simple and effective tutorial.Thanks Reply
Hans
Wed, 28th April 2010
A really nice button, but in the demo the form reloads with clearing the fields. To submit, you must use the mouse and as a lot of people use the enter-key to submit a form, this is unacceptable for standard using. Reply
Orson
Wed, 28th April 2010
not work in IE 8 Reply
Deluxe Blog Tips
Thu, 29th April 2010
The effect is good, especially when we use with ajax load. If you write more about an ajax, I think this post will be great.

Anyway, I love the CSS button :). Thanks for sharing. Reply
دنيا الدلع
Mon, 17th May 2010
it's design for firefox ?

coool nice thanks Reply
Naveed
Thu, 20th May 2010
great, nice , THANKS Reply
fatih
Wed, 6th October 2010
nice work Reply
Brett Widmann
Sat, 20th November 2010
This is a really great tutorial! Thanks for sharing. Reply
Maan
Sat, 9th July 2011
simply superb ... Reply
swaralipi Dutta
Tue, 12th July 2011
This is a really great tutorial! Reply
joseph
Tue, 19th February 2013
very simple method....i dont want this simple logic.... Reply
Bond
Sun, 31st March 2013
Simple tutorial, actually, it helped me learn ajax a little bit better. Reply
satish tak
Mon, 25th November 2013
good tut for the begineers the css is very simple good tut Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement