<button  id=new_one name=button1>My Button</button>

• Video Tutorial on Buttons

Adding Click event to a button

<input type=button id=b1 value='Add'>

<script>
$(document).ready(function() {
$('#new_one').click(function(){
alert('Hi , you clicked the button');
})
})
</script>

Reading which button is clicked from a group of buttons .

<button  id=new_one1 class=my_button>My Button 1</button> <button  id=new_one2 class=my_button>My Button 2</button> <button  id=new_one3 class=my_button>My Button 3</button>



<script>
$(document).ready(function() {
$(".my_button").click(function(){
var str=this.id;
alert('Hi , you clicked one of the button with id= ' + str);
})
})
</script>

Enable or disable a button

$("#b3").prop('disabled',true);

<button id=b1>Disable Button</button>
<button id=b2>Enable Button</button>

<button id=b3>My Button</button>
<script>
$(document).ready(function() {

$("#b1").click(function(){
$("#b3").prop('disabled',true);
})

$("#b2").click(function(){
$("#b3").prop('disabled',false);
})

})
</script>

Reading the status of the button

alert($('#b3' ).prop( 'disabled' ));

Application using button

Reading value ( or label ) of the button

<button  id=new_one12 class=my_button1 value='my_button_12'>My Button 12</button> <button  id=new_one22 class=my_button1 value='my_button_22'>My Button 22</button> <button  id=new_one32 class=my_button1 value='my_button_32'>My Button 32</button>

<script>
$(document).ready(function() {
$(".my_button1").click(function(){
var str=$(this).attr("value");
alert('You clicked one of the button with value = ' + str);
})
})
</script>

Changing text or value of a button

<input type='button' value='Click to Update' id='b_update'>

<button type='button' class='btn btn-warning' id=b_update2>Click to Change </button>
<script>
$(document).ready(function() {

$("#b_update").click(function(){
$("#b_update").prop('value', 'I am UPDATED');
})

$("#b_update2").click(function(){
$("#b_update2").html('I am CHANGED');
})

})
</script>

Single button with updated value and Text

$("#b1_close_open").click(function(){
var str=$(this).attr("value");
if(str=='Close All'){
$("#b1_close_open").prop('value', 'Open All');
$("#b1_close_open").html('Open All');
//$( "#my_tabs" ).tabs( "option", "active", false );
}else{
$("#b1_close_open").prop('value', 'Close All');
$("#b1_close_open").html('Close All');
//$( "#my_tabs" ).tabs( "option", "active", true );
}
})

Bootstrap Button Design

<button type='button' class='btn btn-default btn-md ' id='b1'>Dafault</button>

<button type='button' class='btn btn-lg ' id='b1'>Basic</button>

<button type='button' class='btn btn-primary' id='b1'>Primary</button>

<button type='button' class='btn btn-succcess' id='b1'>sucess</button>

<button type='button' class='btn btn-info' id='b1'>info</button>

<button type='button' class='btn btn-warning' id='b1'>warning</button>

<button type='button' class='btn btn-danger' id='b1'>danger</button>

<button type='button' class='btn btn-success btn-lg'>Large</button>

Block level buttons

<button type='button' class='btn btn-info btn-lg btn-block'>Block level button</button>