What I am trying to do is, when i press a button, do put a border around it, to show it as active. I am also trying to have in JavaScript that the button is active, but I haven't gotten to that yet. Can anyone help me?
$('button').on('click', function() {
$('button').removeClass('active_button');
$(this).addClass('active_button');
});
//Home button active on page load
$(document).ready(function() {
$('#Home').addClass('active_button');
});.cable-choose {
margin-bottom: 20px;
}
.cable-choose button {
border: 2px solid #E1E8EE;
border-radius: 6px;
padding: 13px 20px;
font-size: 14px;
color: #5E6977;
background-color: #fff;
cursor: pointer;
transition: all .5s;
}
.cable-choose button:hover,
.cable-choose button:active,
.cable-choose button:focus {
border: 2px solid #000;
outline: none;
}
.active_button {
border: 2px solid black;
}<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="cable-config">
<span>Select Entries</span>
<div class="cable-choose">
<button id="Home">50 Entries<br>$5.00</button>
<button>100 Entries<br>$10.00</button>
<button>250 Entries<br>$25.00</button>
<button>500 Entries<br>$50.00</button>
</div>
</div>You just need to make your CSS selector more specific. It was being overridden by the standard button styles.
$('button').on('click', function() {
$('button').removeClass('active_button');
$(this).addClass('active_button');
});
//Home button active on page load
$(document).ready(function() {
$('#Home').addClass('active_button');
});.cable-choose {
margin-bottom: 20px;
}
.cable-choose button {
border: 2px solid #E1E8EE;
border-radius: 6px;
padding: 13px 20px;
font-size: 14px;
color: #5E6977;
background-color: #fff;
cursor: pointer;
transition: all .5s;
}
.cable-choose button:hover,
.cable-choose button:active,
.cable-choose button:focus {
border: 2px solid #000;
outline: none;
}
.cable-choose button.active_button { /* <------------ RIGHT HERE */
border: 2px solid black;
}<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="cable-config">
<span>Select Entries</span>
<div class="cable-choose">
<button id="Home">50 Entries<br>$5.00</button>
<button>100 Entries<br>$10.00</button>
<button>250 Entries<br>$25.00</button>
<button>500 Entries<br>$50.00</button>
</div>
</div>I think it's working - I see class="active_button" when I inspect the one I clicked... Your active_button style is identical to your hover/focus/active state though (one sets to #000 and the other to "black" - same color)