How do i change the background foreground and border color in WPF when hovering with my mouse

Question

I'm trying to change the color of the button in my WPF project so that when you're hovering over with your mouse. The default should be:

background: #00000f
foreground: #77dff1
border: #77dff1

The desired output should be:

background: #77dff1
foreground: #FFFFFF
border: #FFFFFF

I think this is correct but I have no idea why it's only executing the middle setter command

<Window x:Class="introducereDAC.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:introducereDAC"
        mc:Ignorable="d"
        Title="Divide et Impera" Height="450" Width="800" Background="#FF00000F">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"></ColumnDefinition>
            <ColumnDefinition Width="1*"></ColumnDefinition>
            <ColumnDefinition Width="1*"></ColumnDefinition>
            <ColumnDefinition Width="1*"></ColumnDefinition>
            <ColumnDefinition Width="1*"></ColumnDefinition>
            <ColumnDefinition Width="1*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"></RowDefinition>
            <RowDefinition Height="2*"></RowDefinition>
            <RowDefinition Height="2*"></RowDefinition>
            <RowDefinition Height="5*"></RowDefinition>
        </Grid.RowDefinitions>
        <TextBlock Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" HorizontalAlignment="Left" VerticalAlignment="Center" TextWrapping="Wrap" Text="Introducere DEI (curent)" Margin="15" Width="177" FontFamily="./#Roboto Condensed" Foreground="#505054"/>
        <Viewbox Stretch="Uniform" StretchDirection="Both" Grid.Column="0" HorizontalAlignment="Center" Grid.Row="1" VerticalAlignment="Top" Grid.ColumnSpan="2">
            <Button Content="Introducere DEI" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Center" FontFamily="./#Roboto Condensed" FontWeight="Bold" Margin="5,0">
                <Button.Style>
                    <Style TargetType="{x:Type Button}">
                        <Setter Property="Background" Value="#00000f"/>
                        <Setter Property="Foreground" Value="#77dff1"/>
                        <Setter Property="BorderBrush" Value="#77dff1"/>
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="#77dff1"/>
                                <Setter Property="Foreground" Value="#FFFFFF" />
                                <Setter Property="BorderBrush" Value="#FFFFFF"/>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </Button.Style>
            </Button>
        </Viewbox>
        <Viewbox Stretch="Uniform" StretchDirection="Both" Grid.Column="2" HorizontalAlignment="Center" Grid.Row="1" VerticalAlignment="Top" Grid.ColumnSpan="2">
            <Button Content="DEI Iterativ" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Center" Background="#FF00000F" Foreground="#FF77DFF1" BorderBrush="#FF77DFF1" FontFamily="./#Roboto Condensed" FontWeight="Bold" Margin="5,0"/>
        </Viewbox>
        <Viewbox Stretch="Uniform" StretchDirection="Both" Grid.Column="4" HorizontalAlignment="Center" Grid.Row="1" VerticalAlignment="Top" Grid.ColumnSpan="2">
            <Button Content="Probleme DEI" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Center" Background="#FF00000F" Foreground="#FF77DFF1" BorderBrush="#FF77DFF1" FontFamily="./#Roboto Condensed" FontWeight="Bold" Margin="5,0"/>
        </Viewbox>
    </Grid>
</Window>

Answer 1

You can try using a control template in your style:

<Button Content="Introducere DEI" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Center" FontFamily="./#Roboto Condensed" FontWeight="Bold" Margin="5,0">
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Background" Value="#00000f"/>
            <Setter Property="Foreground" Value="#77dff1"/>
            <Setter Property="BorderBrush" Value="#77dff1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="#77dff1"/>
                    <Setter Property="Foreground" Value="#FFFFFF" />
                    <Setter Property="BorderBrush" Value="#FFFFFF"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

Result on mouse over: