Changing background color of a button when clicked

Question

I am newbie and I have a question. I am trying to change the background-color and color of a button when i click on them. The buttons must not do anything when clicked, just to change their colors.

For example, I want to click on 2 buttons... both must change their background color from white to blue. Same thing if i want to click on 1 or more buttons. How can i do this effect? I am posting my HTML and CSS below:

<div class="multiple-choice gradient">
    <div class="container">
        <h2 class="multiple-choice-h">Please select the products, that you are interested in:</h2>
        <div class="choice">
            <div class="purvi-red">
                <div class="row">
                    <div class="col-md-6">
                        <button type="button" class="btn">text</button>
                    </div>
                    <div class="col-md-6">
                        <button type="button" class="btn">text</button>
                    </div>
                </div>
            </div>
            <div class="vtori-red">
                <div class="row">
                    <div class="col-md-6">
                        <button type="button" class="btn">text</button>
                    </div>
                    <div class="col-md-6">
                        <button type="button" class="btn">text</button>
                    </div>
                </div>
            </div>
            <div class="treti-red">
                <div class="row">
                    <div class="col-md-6">
                        <button type="button" class="btn">Interested in all</button>
                    </div>
                </div>
            </div>
            <div class="chetvurti-red">
                <div class="row">
                    <div class="col-md-12">
                        <button type="button" class="btn-primary">Continue to Subscribe Page</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

css

  .multiple-choice-h {
    color:white;
    font-weight: 100;
    font-size:3.1em;
    font-family: "Roboto";
    line-height: 1.2;
    margin-top:5%;
    word-spacing: 8px;
    letter-spacing: 1px;
}
.choice {
    margin-top:6%;
}
.btn {
    width:100%;
    border-style: solid;
    border-width: 1px;
    border-color: rgb(45, 157, 225);
    border-radius: 3px;
    background-color: #ffffff;
    color:#0077c0;
    box-shadow: 0px 4px 0px 0px #0083aa;
    text-align:left;
    padding-left:20px;
    padding-top:24px;
    padding-bottom:24px;
    font-size:1.7em;
    font-weight: bold;
}

    .vtori-red {
        margin-top:1.5%;
    }

    .treti-red {
        margin-top:1.5%;
    }

    .chetvurti-red {
        margin-top:5%;
    }

    .btn-primary {
        width:100%;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: url(../img/arrow-right.png) #f49500 no-repeat 67% !important;
        color:black;
        font-size:1.8em;
        font-weight: bold;
        font-family: "Roboto";
        color:white;
        padding-top:20px;
        padding-bottom:20px;
        border:none;
        box-shadow: 0px 4px 0px 0px #0083aa;
        text-align:center;
        border-radius:5px;
        margin-bottom:100px;
    }

https://stackoverflow.com/questions/15463854/pressed-button-css Otherwise you should look for javascript — Doomenik, Aug 08 '17 at 11:06
You could have used an anchor instead of a button with the [visited] modifier since you're using bootstrap. — Sal, Aug 08 '17 at 11:23

score 2 · Accepted Answer · answered Aug 08 '17 at 11:10

I've created an example with jQuery. Have a look:

$('.btn').click(function() {
  if ($(this).hasClass("active")) {
    $(this).removeClass("active");
  } else {
    $(this).addClass("active");
  }
});

.multiple-choice-h {
  color: white;
  font-weight: 100;
  font-size: 3.1em;
  font-family: "Roboto";
  line-height: 1.2;
  margin-top: 5%;
  word-spacing: 8px;
  letter-spacing: 1px;
}

.choice {
  margin-top: 6%;
}

.btn {
  width: 100%;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(45, 157, 225);
  border-radius: 3px;
  background-color: #ffffff;
  color: #0077c0;
  box-shadow: 0px 4px 0px 0px #0083aa;
  text-align: left;
  padding-left: 20px;
  padding-top: 24px;
  padding-bottom: 24px;
  font-size: 1.7em;
  font-weight: bold;
}

.vtori-red {
  margin-top: 1.5%;
}

.treti-red {
  margin-top: 1.5%;
}

.chetvurti-red {
  margin-top: 5%;
}

.btn-primary {
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(../img/arrow-right.png) #f49500 no-repeat 67% !important;
  color: black;
  font-size: 1.8em;
  font-weight: bold;
  font-family: "Roboto";
  color: white;
  padding-top: 20px;
  padding-bottom: 20px;
  border: none;
  box-shadow: 0px 4px 0px 0px #0083aa;
  text-align: center;
  border-radius: 5px;
  margin-bottom: 100px;
}

.active {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multiple-choice gradient">
  <div class="container">
    <h2 class="multiple-choice-h">Please select the products, that you are interested in:</h2>
    <div class="choice">
      <div class="purvi-red">
        <div class="row">
          <div class="col-md-6">
            <button type="button" class="btn">text</button>
          </div>
          <div class="col-md-6">
            <button type="button" class="btn">text</button>
          </div>
        </div>
      </div>
      <div class="vtori-red">
        <div class="row">
          <div class="col-md-6">
            <button type="button" class="btn">text</button>
          </div>
          <div class="col-md-6">
            <button type="button" class="btn">text</button>
          </div>
        </div>
      </div>
      <div class="treti-red">
        <div class="row">
          <div class="col-md-6">
            <button type="button" class="btn">Interested in all</button>
          </div>
        </div>
      </div>
      <div class="chetvurti-red">
        <div class="row">
          <div class="col-md-12">
            <button type="button" class="btn-primary">Continue to Subscribe Page</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

This will add the class active to the clicked btn if it's not clicked before. If you click it again, active will be removed.

To change the background-color or add some extras, just edit the css of .active.

Thanks a lot for the help. Since I am a newbie and i try to learn some new tricks, i think i should start learning JS and jQuery soon so i can do effects. I learned HTML, CSS and Bootstrap and the idea with the buttons came to my mind to test it. — valio957, Aug 08 '17 at 11:20

score 0 · Answer 2 · answered Aug 08 '17 at 11:12

0

Use JS for color changing. Consider this button,

<button type="button" class="btn">text</button>

Include the script

<script>
$('.btn').click(function(){
 $(this).css('color','red');
});
</script>

This will change the color to red to whichever button you've clicked.

PS:Include JQuery library for this to work.

answered Aug 08 '17 at 11:12

Alan Pallath

99
3
14

Thanks a lot for the help. Since I am a newbie and i try to learn some new tricks, i think i should start learning JS and jQuery soon so i can do effects. I learned HTML, CSS and Bootstrap and the idea with the buttons came to my mind to test it. – valio957 Aug 08 '17 at 11:20
Jquery can do magic in your HTML code. Changing CSS variables is just the basic ones. Go through the documentation https://api.jquery.com/ for more information. Happy to help. – Alan Pallath Aug 08 '17 at 11:39

Mikey · Answer 3 · 2017-08-08T12:29:56.697

0

If you wanted to use CSS without Javascript then you could potentially do this with a checkbox and a label like so;

input[type=checkbox] {
  display: none;
}

input[type=checkbox] + label {
  background-color: red;
  padding: 10px 15px;
}

input[type=checkbox]:checked + label{
  background-color: blue;
}

<input id="checkbox1" type="checkbox"/>
<label for="checkbox1"></label>

edited Aug 08 '17 at 12:29

answered Aug 08 '17 at 11:16

Mikey

2,606
1
12
20

Changing background color of a button when clicked

3 Answers3