Angular 4 добавляет переход при наведении курсора мыши

Я пытаюсь добиться такого же эффекта перехода на таких кнопках, как здесь https://getbootstrap.com/docs/4.0/components/buttons/#outline-buttons. Мне нужно гораздо больше настроек, чем предлагает bootstrap, поэтому я пытаюсь сделать это самостоятельно, используя стили / эффекты css.

Вот как я отображаю кнопки:

<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>

Две функции в компоненте (да, я знаю, что эффект перехода в этой функции бессмыслен, потому что он не влияет на при наведении курсора):

  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.info("aasdasd");
  }

В настоящее время я получил это. Теперь я хотел бы получить этот эффект перехода при наведении курсора. Есть ли способ заставить его работать? Я не могу просто поместить его в файл .css, потому что мне нужно динамически создавать цвета (это зависит от значения cat).