Achieving CSS Buttons That Change to Green When Clicked and STAY Green

Question

Achieving CSS Buttons That Change to Green When Clicked and STAY Green

I've been tasked with working on a front-end project for a website that involves buttons changing color when clicked and staying that color.

Here is the CSS <style> code I have written for these specific buttons:

.button {
    background-color: #ffffff;
    border: 1px solid #3e1313;
    color: #3e1313;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    margin: 4px 2px;
}

button:hover{background-color:orange;}

.button4 {border-radius: 10px;}

HyperText:

<div class="row">
  <div class="columnExpand">
    <label class="container" name="lblDriverExperience">
      Driver Experience
      <input type="checkbox" name="chkDriverExperience" 
             onchange="divToggle('divDriver')">
      <span class="checkmark"></span>
    </label>
  </div>
  <div class="columnOption" id="divDriver">
    <button class="button button4">Good</button>
    <button class="button button4">Fair</button>
    <button class="button button4">Poor</button>
  </div>
</div>

JAVASCRIPT:

<script type="text/javascript>
  $("#test").click(function() {$(this).toggleClass( "active")})
</script>

While the button currently turns brown on hover, my goal is to make it turn green when clicked and stay green. I've searched for solutions but haven't found one that works.

javascript jquery html css

Answer 1

Answer №1

To change the appearance of a button, you can add or remove the class .active

$(".columnOption .button").click(
  function() {$(this).toggleClass( "active")}
)

$(".columnOption .button").click(
  function() {$(this).toggleClass( "active")}
)

.button {
    background-color: #ffffff;
    border: 1px solid #3e1313;

    color: #3e1313;
    padding: 10px;
    text-align: center;
    text-decoration: none;

    font-size: 12px;
    margin: 4px 2px;
}

button:hover{background-color:orange;}

.button4 {border-radius: 10px;}

.columnOption .button.active {
    background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="columnExpand">
    <label class="container" name="lblDriverExperience">
      Driver Experience
      <input type="checkbox" name="chkDriverExperience" 
             onchange="divToggle('divDriver')">
      <span class="checkmark"></span>
    </label>
  </div>
  <div class="columnOption" id="divDriver">
    <button class="button button4">Good</button>
    <button class="button button4">Fair</button>
    <button class="button button4">Poor</button>
  </div>
</div>

Answer 2

To change the appearance of a button, you can add or remove the class .active

$(".columnOption .button").click(
  function() {$(this).toggleClass( "active")}
)

$(".columnOption .button").click(
  function() {$(this).toggleClass( "active")}
)

.button {
    background-color: #ffffff;
    border: 1px solid #3e1313;

    color: #3e1313;
    padding: 10px;
    text-align: center;
    text-decoration: none;

    font-size: 12px;
    margin: 4px 2px;
}

button:hover{background-color:orange;}

.button4 {border-radius: 10px;}

.columnOption .button.active {
    background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="columnExpand">
    <label class="container" name="lblDriverExperience">
      Driver Experience
      <input type="checkbox" name="chkDriverExperience" 
             onchange="divToggle('divDriver')">
      <span class="checkmark"></span>
    </label>
  </div>
  <div class="columnOption" id="divDriver">
    <button class="button button4">Good</button>
    <button class="button button4">Fair</button>
    <button class="button button4">Poor</button>
  </div>
</div>

Answer 3

Answer №2

Here is a simple solution that may suit your needs:

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

You can see it in action on this Fiddle: https://jsfiddle.net/CriticalError/jLst5owk/

Answer 4

Here is a simple solution that may suit your needs:

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

You can see it in action on this Fiddle: https://jsfiddle.net/CriticalError/jLst5owk/

Answer 5

Answer №3

div label input {
   margin-right:100px;
}
body {
    font-family:sans-serif;
}

#ck-button {
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
}

#ck-button label {
    float:left;
    width:4.0em;
}

#ck-button label span {
    text-align:center;
    padding:3px 0px;
    display:block;
}

#ck-button label input {
    position:absolute;
    top:-20px;
}

#ck-button input:checked + span {
    background-color:#911;
    color:#fff;
}

<div id="ck-button">
   <label>
      <input type="checkbox" value="1"><span>red</span>
   </label>
</div>

Answer 6

div label input {
   margin-right:100px;
}
body {
    font-family:sans-serif;
}

#ck-button {
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
}

#ck-button label {
    float:left;
    width:4.0em;
}

#ck-button label span {
    text-align:center;
    padding:3px 0px;
    display:block;
}

#ck-button label input {
    position:absolute;
    top:-20px;
}

#ck-button input:checked + span {
    background-color:#911;
    color:#fff;
}

<div id="ck-button">
   <label>
      <input type="checkbox" value="1"><span>red</span>
   </label>
</div>

Achieving CSS Buttons That Change to Green When Clicked and STAY Green

Answer №1

Answer №2

Answer №3

Similar questions

The request for an advertisement was successful, however, no ad could be displayed as there was insufficient ad inventory available. Please handle the situation appropriately with the

What could be causing my ajax post function to malfunction when triggered by a button click event?

What's the best way to update the value of a TextInput field?

Unable to generate a navigation panel using HTML/CSS and jQuery

What is the best way to arrange two images next to each other using HTML and CSS in order to effectively utilize a specified width?

How can I modify the background color of the datePicker?

Code for retrieving information; some data may not be retrieved

Twilio SMS Notification: The Class extension value provided is not a valid constructor or null

Guide to including objects into your project without the need for babel through the use of CDN

Understanding the concept of for loops in JavaScript and incorporating them in CSS styling

Is it possible to customize componentWillLeave(callback) in ReactCSSTransitionGroup?

Guide to verify the user selection within a select form

Alternating the tooltip icon based on the field's condition

Transferring information to PHP using AJAX and then populating the response in a text field

Displaying two dropdown menus with just a single coding component

Can someone help me understand why this AJAX script is returning a status code of 404?

"Enhance your ASP.NET site with a captivating background

TypeScript React Object.assign method return type

Would you be able to clarify why the run() function is giving me an error when I try to return {1,3}, but it works fine when I return {a,b} in

"What is the best way to access the value of a useState variable in ReactJS on a global