Setting background & opacity to button but not affecting it's content

Question

I am working with WPF, and what I want to do is to set opacity and background color of my button but I dont want to affect content inside my button. I tried few ways but unfortunately that did not work.

I found this style and I would like to apply something like that:

This is my numeric keyboard: ( I AM TRYING TO EDIT BTN 7) :

As you can see guys, unfortunately I could not set opacity of my button without affecting the content inside.

Here is my XAML code (focus on btn 7):

<StackPanel Height="50" Orientation="Horizontal" Margin="0,0,0,5">
                <Button  FontSize="15" FontWeight="Bold" x:Name="btn7" Foreground="#83D744" Click="btn7_Click" BorderBrush="#83D744" BorderThickness="0.5" Content="7" Width="80" RenderTransformOrigin="0.557,0.693" d:LayoutOverrides="HorizontalAlignment" Background="Black" Opacity="0.2" Margin="0,0,5,0" />
                <Button  FontSize="15" Foreground="Black" FontWeight="Bold" x:Name="btn8" Click="btn8_Click" Content="8" Width="80" Background="#FF50504F" Margin="0,0,5,0"/>
                <Button  FontSize="15" Foreground="Black" FontWeight="Bold" x:Name="btn9" Click="btn9_Click" Content="9" Width="80" d:LayoutOverrides="HorizontalAlignment" Background="#FF50504F"/>
</StackPanel>

So could anyone help me please how to solve this thing.. Thanks!

Answer 1

add transparency to a brush used for Background

hex code for Black color is #000000

change alpha channel to make it semi-transparent (Background="#50000000") and remove Opacity="0.2"

<Button x:Name="btn7"
        FontSize="15" FontWeight="Bold" Foreground="#83D744" 
        Click="btn7_Click" 
        BorderBrush="#83D744" BorderThickness="0.5" 
        Content="7" Width="80" RenderTransformOrigin="0.557,0.693"
        d:LayoutOverrides="HorizontalAlignment" 
        Background="#50000000" Margin="0,0,5,0" />