My goal is to create a transition effect on buttons similar to the ones showcased on this Bootstrap page. However, I require more customization than what Bootstrap provides, so I am attempting to achieve this through CSS styles and effects.
Here is how I currently display my buttons:
<div class="container">
<div *ngFor="let cat of categories">
<ul>
<li>
<button [ngStyle]="matchButtonColor(cat)" (mouseover)="transition()" class="btn " type="button" (click)="openDialog(cat)"> {{cat.name}} </button>
<categories *ngIf="cat.children" [categories]="cat.children" (category)="onClickChild($event)"></categories>
</li>
</ul>
</div>
</div>
Within the component, I have two functions (although I know that the transition effect does not work as intended in this setup):
matchButtonColor(category: AdminCategory) {
var s = {
'background-color': 'white',
'border-color': '#8064A2',
'color': '#8064A2',
'transition': 'color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out'
}
return s;
}
transition(){
console.log("aasdasd");
}
Currently, I have achieved this setup. My next aim is to implement the transition effect on hover. Is there a way to make this happen? Simply adding it to a .css file won't suffice because the colors are generated dynamically based on the value of cat.