Можно ли изменить цвет элемента при наведении курсора мыши с html на Angular?

Цвет кнопки передается компоненту в виде строки и должен использоваться в стилях кнопок. Мне удалось настроить цвет фона и границы, но я не могу изменить цвет метки при наведении на нее курсора. Я нашел частичное решение, но оно также меняет и другие кнопки:

@for (button of toast.buttons; track button){
        <button
          [ngStyle] = "hovered === 1 ? {'background-color': button.color, 'border-color':button.color, 'color':button.color} : {'background-color': button.color, 'border-color':button.color, 'color':'#fff'}"
          (mouseover) = "hovered = 1"
          (mouseout) = "hovered = -1"
          (click) = "close()"
          class = "modal-button">
          {{button.text}}
        </button>
      }

Здесь я попробовал изменить цвет текста при наведении с помощью mouseover и mouseout, но это привело к следующему результату: Без наведения:

При наведении:

Как видите, при наведении курсора на одну кнопку вторая тоже окрашивается.

Я пытался искать решения в интернете, но ничего вразумительного не нашел. Подскажите, есть ли способ избежать такого результата? Например, передача значения переменной button.color в файл CSS или иная обработка наведения.