Tutorial on How to change CSS on Button Click with jQuery

Tutorial on how to change The Color, The Design, or how to style any Element on Button Click with jQuery.

So for example you got this button:

<button type="button">Change Color</button>

Before we start to style our Button, we need to add a Class to our Button Element.

Lets call it “button-one”.

<button type="button" class="button-one">Change Color</button>

And add the jQuery Script which changes the color of our button:

<script type="text/javascript">
  $('.button-one').click(function(){
    $(".button-one").css("background-color", "yellow");
});
</script>

So, after we clicked our button, the color will change from grey to yellow.

If it didn’t work… maybe you forgot to include jQuery in your script?

https://code.jquery.com/

That was the first way to change the color of our button.

The other way is to add a Class with style element to our button.

First we need to create new CSS element like this:

<style>
  .yellow {
    background-color: yellow;
  }
</style>

And the code looks something like this:

  $('.button-one').click(function(){
    $(".button-one").addClass('yellow');
});

After we clicked our button we are adding a new class to our button class.

This way after the button is clicked, the html is going to look like this:

The same idea is applied if we want to change the CSS based on the ID of the element.

So for example, if we have button element with the id “button-2”:

<button type="button" id="button-2">Change Color</button>

We can change the color with almost the same script:

  $('#button-2').click(function(){
    $("#button-2").addClass('red');
});
Where the style element looks like this:
.red {
  background-color: red;
}

This way we can change the color of our button from grey to red.

You can also style with the css function more than just one CSS parameter.

  $('.button-3').click(function(){
    $('.button-3').css({
    'background-color': 'blue',
    'border' : '1px solid yellow',
    'color' : 'white',
    'font-size': '16px',
    'text-align' : 'center',
    'display' : 'block',
    'padding-left' : '25px',
    'padding-right' : '25px'
  });
});

Where the html element looks like this:

<button type="button" class="button-3">Change Color</button>

If the element already is styled, but you want to remove the style, you can than for example remove the class. This way you also remove the style from it.

$('.button-4').removeClass("red");

The final code looks something like this:

<button type="button" class="button-4 red">Change Color</button>

<style>
  .red {
    background-color: red;
    color: white;
  }
</style>
<script type="text/javascript">
  $('.button-4').click(function(){
    $('.button-4').removeClass("red");
});
</script>

If you want to change the color of your button when the cursor is over your button, you can use than the jQuery “mouseover” and “mouseout” function.

 

$('.button-5').mouseover(function() {
  $('.button-5').css('background-color', 'yellow');
});

$(".button-5").mouseout(function(){
  $(".button-5").css("background-color", "lightgray");
});
Where the html element looks like this:
<button type="button" class="button-5">Change Color</button>

If you want to change the color of the button every time the button is clicked, than you can use jQuery toggle Class function.

<button type="button" class="button-6">Change Color</button>

<style>
  .red {
    background-color: red;
  }
</style>
<script type="text/javascript">
$( ".button-6" ).click(function() {
  $( this ).toggleClass( "red" );
});

</script>
You Don’t Need jQuery approach:

After all you can do it also in pure JavaScript like this:

<button type="button" id="button-7">Change Color</button>

<script type="text/javascript">

document.getElementById("button-7").onclick = function() {changeButtonColor()};

function changeButtonColor() {
  document.getElementById( "button-7" ).style.backgroundColor = "yellow"
}
</script>

That’s all for this tutorial. Happy Coding!

Photo Source:

Willian Justen de Vasconcellos

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.