i know this question may sound stupid to you guys, but i am a beginner so need some expert help and i want to ask that is there anyway to change background-color of the button when pressed, i mean when clicked it changes to different background-color and when released sets to default (when pressed via mouse). i am trying but when i set function to trigger on "keypress" the function doesn't trigger but when i use "click" it works but doesn't change to default when released...please help me..

javascript/jquery:

function initAll(){
$("#submitBtn").on('keypress', sendMessage);
}

function sendMessage(){
    $("#submitBtn").css('background-color', 'Red');
}

html:

<input type="button" id="submitBtn" name="submitBtnnm" value="Send" />

i know this question may sound stupid to you guys, but i am a beginner so need some expert help and i want to ask that is there anyway to change background-color of the button when pressed, i mean when clicked it changes to different background-color and when released sets to default (when pressed via mouse). i am trying but when i set function to trigger on "keypress" the function doesn't trigger but when i use "click" it works but doesn't change to default when released...please help me..

javascript/jquery:

function initAll(){
$("#submitBtn").on('keypress', sendMessage);
}

function sendMessage(){
    $("#submitBtn").css('background-color', 'Red');
}

html:

<input type="button" id="submitBtn" name="submitBtnnm" value="Send" />

• javascript
• jquery
• html

5 Answers 5

You dont need JS - just the :active state

#submitBtn:active {
    background: red;
}

DEMO

I would do it the following way (easier to read in my opinion):

function initAll() {
   $("#submitBtn").click(sendMessage);
}

function sendMessage () {
   $("#submitBtn").css('background-color', 'red');
}

Make sure you call the code initAll() on $(document).ready(). Otherwise, the code might run when there are no matching elements on the page.

Comment if you need more advice!

Try the jQuery mousedown and mouseup functions: http://api.jquery./mousedown/ and http://api.jquery./mouseup/

$(document).ready(function(){
  $("button").mousedown(function(){
    $(this).css("background", "red");        
  });
  $("button").mouseup(function(){
    $(this).css("background", "green");        
  });    
});

http://jsfiddle/CdzSB/

you should use css class like this and use jquery to add class to body tag when button click

.changeback{
background-color: #333333;
background-image: url('images/background9.jpg');
 }

and jquery code should be like this

$("#send").click(function(){
  $('body').addClass('changeback');
}):

Have you tried the following?:

$('document').ready(function() {
    $('#submitBtn').mousedown(function() {
        $('#submitBtn').css('background-color', 'Red');
    }).mouseup(function() {
        $('#submitBtn').css('background-color', 'Blue');
    });
});

Basically, when the user presses the button it turns red, and when the user stops pressing it it turns blue.

Hope this helps. :)