Help With Widget btn-group Make current button color change

[Patricia21]

I am trying to set the button section that is the current selected section to a different color so the user knows which is the active section they are working on.

How can I achieve this.

Here is my HTML

So if the user selects one of the sections then that button background should be set like the home button has a blue icon, the tab should be colored and the others still white.

Any help would be appreciated, 

Thank you

<div>
  <div class="btn-group btn-breadcrumb" >
    <a ng-click="c.setSection1Visible()" class="btn btn-info"><i class="glyphicon glyphicon-home"></i></a>
    <a ng-click="c.setSection1Visible()" class="btn btn-default">Request Info</a>
    <a ng-click="c.setSection2Visible()" class="btn btn-default">Data Retrieval</a>
    <a ng-click="c.setSection3Visible()" class="btn btn-default">Internal Req</a>
    <a ng-click="c.setSection4Visible()" class="btn btn-default">External Req</a>
    <a ng-click="c.setSection5Visible()" class="btn btn-default">Regulatory Info</a>
    <a ng-click="c.setSection6Visible()" class="btn btn-default">Client Impact</a>
    <a ng-click="c.setSection7Visible()" class="btn btn-default">Project Info</a>
  </div>
</div>

<script>
const element = document.getElementById("btn");
element.addEventListener("click", myFunction);

function myFunction() {
 
  btn.style.backgroundColor = 'salmon';
  btn.style.color = 'white';
}
</script>

[Yousaf]

Hi Patricia,

Can you send CSS Please.

[Patricia21]

Thank you Yousaf,

I added the last part of css and the button is blue but I can't get it to work when changing tabs

.btn-breadcrumb .btn:not(:last-child):after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 10px solid white;
  position: absolute;
  top: 50%;
  margin-top: -17px;
  left: 100%;
  z-index: 3;
}
.btn-breadcrumb .btn:not(:last-child):before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 10px solid rgb(173, 173, 173);
  position: absolute;
  top: 50%;
  margin-top: -17px;
  margin-left: 1px;
  left: 100%;
  z-index: 3;
}

/** The Spacing **/
  
.btn-breadcrumb .btn {
  padding:6px 12px 6px 24px;
  font-size:16px;
}
.btn-breadcrumb .btn:first-child {
  padding:6px 6px 6px 10px;
}
.btn-breadcrumb .btn:last-child {
  padding:6px 18px 6px 24px;
}

/** Default button **/
.btn-breadcrumb .btn.btn-default:not(:last-child):after {
  border-left: 10px solid #fff;
}
.btn-breadcrumb .btn.btn-default:not(:last-child):before {
  border-left: 10px solid #ccc;
}
.btn-breadcrumb .btn.btn-default:hover:not(:last-child):after {
  border-left: 10px solid #ebebeb;
}
.btn-breadcrumb .btn.btn-default:hover:not(:last-child):before {
  border-left: 10px solid #adadad;
}
.btn-breadcrumb .btn.btn-default:focus {
 border-left: 10px solid #adadad;
  button-background-color: #54F5FB; 
	    color: #54F5FB;
}

[Yousaf]

yes you need active selector to make it work like this for example

a:active {
  background-color: yellow;
}

here refer to this link i think it will be super helpful for you. and it will answer your query hopefully.

CSS Button Style – Hover, Color, and Background

let me know if it does'nt work. If it does do mark my anwer correct and helpful.

[Patricia21]

Thank you Yousaf - that is a good link -  I actually was on it yesterday trying to figure it out.

For some reason the hoover works but I am not able to get the button to stay a different background color when selected