change button color

How to Change the Background Color of a Button on Mouse Click When Using jQuery

In this article am going to illustrate how you can change the background color of a button after it has been clicked when using jQuery.

This kind of functionality makes a website or web application more responsive and interactive with the user especially when you have many buttons or links and you want your users to know which button has been clicked and which information they are viewing.

What is jQuery?

jQuery is a JavaScript library that provides quick HTML code traversing, event handling, animations for web development and also supports use of AJAX technology.

To use JQuery you can either:

1Download the library from the internet to get the most recent version and then put the downloaded library in the folder where your web pages are and then include it in your web page(inside the head section) like

< script type = “text/javascript” src = “others/jquery-3.2.1.min.js” > 

OR

2. You can include jQuery directly into your webpage using Content Delivery Network (CDN) like

< script type = “ text/javascript ”
src = ” http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js” >


Note: This options only works as long as you are connected to the internet whereas option 1 is for offline use.

In this article am using the downloaded jQuery library of version 3.2.1.

Other tools needed
A Code editor like Notepad or WordPad (Default applications in windows operating system) or Adobe Dreamweaver

Illustration
To illustrate this we are going to use two buttons whose color will be changing when clicked. When one of these buttons is clicked, its background color changes to yellow whereas the background color of the other button goes back to normal i.e. without any color in the background.

Now go to your editor and create a new file, name it index.html and paste in it the code below.

< ! DOCTYPE html>


<span class="Apple-converted-space">  </span>Changing Background color<span class="Apple-converted-space">  </span>

 
 


 

The code you have just pasted into your editor does not display anything in the web browser, we are just including the jQuery library into our web page , giving the webpage a title and also adding tags that are used to define a web page and they are understood by the web browser i.e. tag, tag and tag. These tags are put in every webpage and they must be closed as shown above like this tag, tag and .

Now inside the body i.e. between and tags edit your index.html file by adding the code as shown below.

The code you have just added to your index.html file is the one that displays the two buttons whose background color we are going to change when clicked.

Inside the

Powered by WPeMatico

Leave a Comment

Scroll to Top