Change Background of Buttons after Clicks in Angular 8? - html

Question

I have 4 buttons in a row in HTML of my Angular 8 Component.I am using ant design (antd) library.
What I Want ?
I want to change the background-color of button when it is
clicked.
Previously pressed button should return to original styling when
other button is pressed. And newly pressed should be highlighted
by changing background-color
Contraint
I want to achieve this without click-event method.I want to do this purely CSS(styling) based like giving buttons id and class and then implementing it ?
I checked few stack-overflow posts relevant to this problem but those did't helped. Few using hover and active classes
HTML
<div class="row">
<div class="col-md-1 col-sm-1">
<button (click)="redirectToHub1()" type="button" class="ant-btn ant-btn-primary ant-btn-lg"
ant-click-animating-without-extra-node="false" ><span>Hub 1</span></button>
</div>
<div class="col-md-1 col-sm-1">
<button (click)="redirectToHub2()" type="button" class="ant-btn ant-btn-primary ant-btn-lg"
ant-click-animating-without-extra-node="false" >Hub2</button>
</div>
<div class="col-md-1 col-sm-1">
<button (click)="redirectToHub3()" type="button" class="ant-btn ant-btn-primary ant-btn-lg"
ant-click-animating-without-extra-node="false" >Hub 3</button>
</div>
<div class="col-md-1 col-sm-1">
<button (click)="redirectToHub4()" type="button" class="ant-btn ant-btn-primary ant-btn-lg"
ant-click-animating-without-extra-node="false" >Hub 4</button>
</div>
</div>
Typescript
redirectToHub1() {
this.router.navigate(["/hubs/hub1"], {
queryParams: { id: `${this.hubCode}` },
});
}
redirectToHub2() {
this.router.navigate(["/hubs/hub2"], {
queryParams: { id: `${this.hubCode}` },
});
}
redirectToHub3() {
this.router.navigate(["/hubs/hub3"], {
queryParams: { id: `${this.hubCode}` },
});
}
redirectToHub2() {
this.router.navigate(["/hubs/hub4"], {
queryParams: { id: `${this.hubCode}` },
});
}
Current Display
Required Display
It works fine with below styling but when I add (click)="redirectToHub()" methods it does't work
.ant-btn:active, .redirect_btn:focus{
background: blue;
}

Answer 1

Please fins the sample, this will be helpful.
.btn {
border: 1px solid blue;
background: #e7e7e7;
outline: none;
}
.btn:active, .btn:focus{
background: blue;
}
<button class="btn">Test 1</button>
<button class="btn">Test 2</button>
<button class="btn">Test 3</button>
<button class="btn">Test 4</button>
<button class="btn">Test 5</button>