How to create a round corner button and mouse over effect in uwp

See more:

XAML

Xamarin

UWP

hello friends

i want to create a round corner button and on mouse click its change the foreground and background color in uwp xaml.

i have a code style which create a round button but how to change the button foreground and background color in uwp

thnaks in advace. :) have a great day... :)

What I have tried:

<Style x:Key="RoundBtn" TargetType="Button">
            <Setter Property="Background" Value="#27aae1"/>
            <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
            <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}"/>
            <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}"/>
            <Setter Property="Padding" Value="8,4,8,4"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
            <Setter Property="FontWeight" Value="Normal"/>
            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
            <Setter Property="UseSystemFocusVisuals" Value="True"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid x:Name="RootGrid" >
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                                        </Storyboard>
                                    </VisualState>

                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Rectangle RadiusX="20" RadiusY="20" Fill="{TemplateBinding Background}" Margin="0,0,10,0" />
                            <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            <Button Content="Button" HorizontalContentAlignment="Left" VerticalAlignment="Top"  HorizontalAlignment="Left" Margin="-333,-562,0,0"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

<Button FontSize="14" FontFamily="{StaticResource inventoryFont}" Grid.Row="4" Grid.Column="4" Style="{StaticResource RoundBtn}" Background="#27AAE1"  MinWidth="220" Height="40" Foreground="#ffffff" Click="AuthenticateUser" Name="LoginBtn" HorizontalAlignment="Left" VerticalAlignment="Center" Width="171" Padding="0,0,0,0" BorderThickness="0,0,0,0" UseSystemFocusVisuals="True" UseLayoutRounding="True" FocusVisualPrimaryBrush="#00000000" FocusVisualSecondaryBrush="#00000000" Margin="0,0,0,0">Login</Button>

above style can create a button with round corner but how to give the mouse over click effect ??