Create A Sliding Commit Button with jQuery and CSS3

A sliding commit button powered by jQuery and CSS3 that requires an user to click and slide the arrow element across the button to initiate the interaction. Check out this ingenious button concept by Andrew Coyle.

How to use it:

1. Include the Font Awesome 4 in the head section of the document.

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

2. Include the necessary jQuery library and jQuery easing plugin at the end of the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

3. Create a sliding commit button with onChange callback.

<button onchange="alert('Committed!')">
Commit
<confirm>Committed</confirm>
</button>

4. The CSS to style the commit buttons.

button, button > confirm {
position: relative;
display: inline-block;
margin: 0;
padding: 0 20px;
min-width: 180px;
height: 40px;
line-height: 40px;
vertical-align: middle;
text-align: center;
border: none;
outline: none;
border-radius: 5px;
border-top: 1px solid #407B3B;
background: #428A3E;
font-size: 14px;
font-weight: 300;
color: #FFF;
cursor: url(grab.cur), pointer;
overflow: hidden;
}
button:active, button:active > confirm {
cursor: url(grabbing.cur), pointer
}
button > confirm {
display: block;
position: absolute;
top: 0;
padding: 0;
right: 100%;
width: 100%;
border: none;
background: #5CB65C;
}
button > confirm:after {
position: absolute;
top: 0;
right: 0;
padding: 0 15px;
content: "\f054";
font-family: "FontAwesome";
font-weight: normal;
}
button[disabled], button[disabled] > confirm {
cursor: default !important
}
button[disabled] > confirm:after {
content: "\f00c"
}

5. The Javascript to enable the commit button.

<script>
$(function()
{
$('button')
.bind('mousedown',function()
{
if($(this).attr('disabled'))return!1;
return$.data(this,'sliding',1),!1;
})
.bind('mouseupmouseleave',function(e)
{
e.preventDefault();

if($.data(this,'sliding'))
{
$.data(this,'sliding',0);

varpct=(parseInt($(this).find('>confirm').css('right'))/$(this).outerWidth()*100);

if(pct<=25)
$(this).find('>confirm').animate({right:'0'},500,'easeOutSine',function()
{
$(this).closest('button').trigger('change').attr('disabled',!0);
});
else
$(this).find('>confirm').animate({right:'100%'},500,'easeOutBounce');
}

returnfalse;
})
.bind('mousemove',function(e)
{
varsliding=$.data(this,'sliding')?!0:!1,
pos;

if(sliding)
{
pos=(e.pageX-$(this).offset().left)/$(this).outerWidth()*100;
$(this).find('>confirm').css('right',(100-pos)+'%');
}
});
});
</script>

---

This awesome jQuery plugin is developed by ryanboylett. For more Advanced Usages, please check the demo page or visit the official website.