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

Error: The JSON input unexpectedly ended, however the PHP file itself is error-free

Retrieving JSON data from a PHP file through a standalone JavaScript script

The outcome of a Wordpress AJAX submission redirects to the admin-ajax.php file rather than appearing in the designated content

Currently utilizing Yii framework to customize the appearance of a DIV element by specifying the CSS properties within the View, and subsequently storing the CSS file

The issue with React Testing using Jest: The domain option is necessary

Changing the input to uppercase within Vue.js

Icons are failing to display in the dropdown menu of MUI after an option is selected in ReactJS

Having difficulty using replaceWith to replace text in jQuery

How to place a button in the bottom center of a panel using asp.net

What are some solutions for resolving the problem with the anchor attribute in Safari?

What is the reason the useEffect hook does not function properly with a state variable within context?

Vue transition unexpectedly ending in the wrong position due to nested transitions

Implementing an animation feature to facilitate the item filtering process when clicked on

When an AJAX call is made during a PHP session that has timed out

Generating an array in Javascript using JSON

Tips for transforming intricate JavaScript arrays into a unified array and iterating through to create a table

What is the best way to invoke a TypeScript function within a jQuery function?

Update the variable in a PHP script and execute the function once more without the need to refresh the page

Checking form input using jQuery Ajax

The back button stops functioning properly following a push state operation