I'm working on a button bar for my app and I want the color of the button to change based on its state (false, true).
Currently, the button starts out green, turns light green when hovered over, and becomes white when clicked. Once I click it, the button turns white and the hover effect no longer works (nothing happens when hovered over). I've attempted to change the button's class using the DOM, but the button disappears.
HTML
<ion-button *ngIf="getAudio() !== undefined" class="musicIcon" id="musicIcon" fill="clear" button (click)="musicToggle()">
<audio id="backgroundAudio" src="{{getAudio()}}"></audio>
<ion-icon slot="icon-only" name="musical-notes"></ion-icon>
</ion-button>
CSS
.musicIcon{
--color: #047E00;
--color-hover: #A9FEA6;
}
JS
musicToggle() {
this.musicState = !this.musicState;
const icon = document.getElementById("musicIcon");
const audio = document.getElementById("backgroundAudio") as any;
if (this.musicState) {
audio.muted = true;
icon.style.color = 'white';
} else {
audio.muted = false;
icon.style.color = '#047E00';
}
}