Want My Button to Remain Dark When Clicked

Want my Button to remain dark when clicked

Since the radio button get selected when you click the button, you can use a checkbox hack(radio button hack)

input[name="input_11"]:checked + #label_2_11_0,
input[name="input_11"]:checked + #label_2_11_1 {
  background-color: #8d181b !important;
  color: white !important;
}

this will select the next sibling with label tag of a input with name="input_11" and change it's background color. I'm using name="input_11" because that's what the radio button had in your website.

Button color after being clicked

Very likely you will have to override bootstrap's :focus styles as well as :hover -- if you simply want the hover and focus styles to be the same you can do this:

.arrowbtn:hover, .arrowbtn:focus {
   background-color:black;
   border-color: black;
}

otherwise add a separate rule just for .arrowbtn:focus and use whatever styles you want it to have. You may also have use for :active depending on your design.

How to select and change color of a button and revert to original when other button is clicked

What you can do is change all the other buttons (except the currently selected one) to dark grey color.

function chcolor(btn) {
var property=document.getElementById(btn);
property.style.backgroundColor="#0099FF";
for(var i=1;i<=24;i++) {
if(!(btn=='btn'+i)) {
var property=document.getElementById('btn'+i);property.style.backgroundColor="#333333";}}
}

How to remove focus around buttons on click

I found this Q and A on another page, and overriding the button focus style worked for me. This problem may be specific to MacOS with Chrome.

.btn:focus {
  outline: none;
  box-shadow: none;
}

Note though that this has implications for accessibility and isn't advised until you have a good consistent focus state for your buttons and inputs. As per the comments below, there are users out there who cannot use mice.

Use Single button to toggle two functions for easy Light and Dark Mode

Here ya go, with some flare from a switch I made awhile back anyway. If you want verification just open your dev tools and watch the data attribute of the example HTML change live.

const htmlEl = document.documentElement,
      outputExample = document.getElementById('output');
      
let savedTheme = 'light';

// ********************************************************************
//  NOTE: The localStorage example WILL NOT WORK HERE ON STACKOVERFLOW
//        Instead it will throw a "SecurityError" and rightfully so...
//        You'll have to use that part of the example in your
//        own project to see it in action...... JUST FYI.
//        So you will need to UNCOMMENT the commented out stuff for
//        the localstorage example to work. Left it commented out for
//        for other readers to not see the valid securityerror....
// ********************************************************************

// Toggle the theme and update their local storage.
toggleTheme = (bool) => {
   const theme = bool ? 'light' : 'dark';
   htmlEl.dataset.theme = theme;
   // localStorage.setItem('savedTheme', theme);
   
   outputExample.innerText = `${theme} theme`;
}

// Handle their saved preferred theme.
setSavedTheme = () => {

  // If there is no current theme in localstorage then give them one as a default.
  // Like for first time visitors...
  // Uncomment this block and the localstorage piece above for the localstorage example.
  /*
  if (localStorage.getItem('savedTheme') === null) {
    localStorage.setItem('savedTheme', savedTheme);
  } else {
    savedTheme = localStorage.getItem('savedTheme');
  }
  */
  
  htmlEl.dataset.theme = savedTheme;
  outputExample.innerText = `${savedTheme} theme`;
}

// Set the default.
setSavedTheme();

.slide-toggle {
  position: relative;
  font-weight: 600;
  display: inline-block;
  border-radius: 3px;
}
.slide-toggle input:first-of-type {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.slide-toggle input:first-of-type:focus ~ label {
  box-shadow: 0 0 0 6px rgba(255, 0, 0, 0.15);
}
.slide-toggle input:first-of-type:checked ~ label {
  color: #fff;
  background-color: darkorange;
}
.slide-toggle input:first-of-type:checked ~ label:after {
  transform: translateX(100%);
}
.slide-toggle input:first-of-type:disabled ~ label {
  opacity: 0.5;
  pointer-events: none;
}
.slide-toggle label:first-of-type {
  display: flex;
  height: 2rem;
  width: 4rem;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  outline: none;
  color: #777;
  background-color: #ddd;
  border-radius: 3px;
  transition: background-color 0.25s ease, box-shadow 0.15s ease, color 0.25s ease;
}
.slide-toggle label:first-of-type:hover {
  border-color: #777;
  box-shadow: 0 0 0 6px rgba(225, 0, 0, 0.15);
}
.slide-toggle label:first-of-type:after {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  right: 50%;
  border-radius: 3px;
  background-color: #fff;
  transition: transform 0.25s cubic-bezier(0.6, 0.82, 0, 0.76);
}
.slide-toggle label:first-of-type:hover {
  box-shadow: 0 0 0 6px rgba(225, 0, 0, 0.15);
}
.slide-toggle label:first-of-type div {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

html {
  transition: background-color .3s ease;
}

html[data-theme="light"] {
  background-color: #fff;
}

html[data-theme="dark"] {
  color: #fff;
  background-color: #212121;
}

body {
  height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">

<div class="slide-toggle">
  <input id="guidLater"
         type="checkbox" checked
         onchange="toggleTheme(this.checked)"/>
  <label for="guidLater">
    <div><i class="fas fa-sun"></i></div>
    <div><i class="fas fa-moon"></i></div>
  </label>
</div>

<div id="output" style="margin-top: 1rem"></div>

Change button color when clicked

Create this drawable and bind it to button background

<selector 
xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:state_focused="true" android:state_pressed="false" android:drawable="@drawable/YOURIMAGE" />
 <item android:state_focused="true" android:state_pressed="true" android:drawable="@drawable/gradient" />
 <item android:state_focused="false" android:state_pressed="true" android:drawable="@drawable/gradient" />
 <item android:drawable="@drawable/YOURIMAGE" />
 </selector>

Apply it to button

android:background="@drawable/button"

Want My Button to Remain Dark When Clicked