Auto hover color for buttons based on their Background color

the hover color is the same for all of them!\n\n\nThis is probably because in your Button's style, you have one single Background brush when IsMouseOver is True.\n\nbecause it also affects the content of the button and not only the background color\n\n\nThis is probably because when the panel (likely a Border) you are animating is also the parent of the content control(e.g. ContentPresenter, ContentControl), so the Opaciy of this content control is also affected.\n\nTo solve these problems, you just need to create some visual elements (e.g. Rectangles, Borders) at the same level as your content control, and animate them based on which trigger is activated.\n\nHere is a simple example.\n\n<Window.Resources>\n <Style x:Key=\"FocusVisual\">\n <Setter Property=\"Control.Template\">\n <Setter.Value>\n <ControlTemplate>\n <Rectangle Margin=\"2\" SnapsToDevicePixels=\"true\" Stroke=\"{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}\" StrokeThickness=\"1\" StrokeDashArray=\"1 2\"/>\n </ControlTemplate>\n </Setter.Value>\n </Setter>\n </Style>\n <SolidColorBrush x:Key=\"Button.Static.Background\" Color=\"#FFDDDDDD\"/>\n <SolidColorBrush x:Key=\"Button.Static.Border\" Color=\"#FF707070\"/>\n <SolidColorBrush x:Key=\"Button.MouseOver.Background\" Color=\"#FFBEE6FD\"/>\n <SolidColorBrush x:Key=\"Button.MouseOver.Border\" Color=\"#FF3C7FB1\"/>\n <SolidColorBrush x:Key=\"Button.Pressed.Background\" Color=\"#FF737B7F\"/>\n <SolidColorBrush x:Key=\"Button.Pressed.Border\" Color=\"#FF2C628B\"/>\n <SolidColorBrush x:Key=\"Button.Disabled.Background\" Color=\"#FFF4F4F4\"/>\n <SolidColorBrush x:Key=\"Button.Disabled.Border\" Color=\"#FFADB2B5\"/>\n <SolidColorBrush x:Key=\"Button.Disabled.Foreground\" Color=\"#FF838383\"/>\n <Style x:Key=\"MyButtonStyle\" TargetType=\"{x:Type Button}\">\n <Setter Property=\"FocusVisualStyle\" Value=\"{StaticResource FocusVisual}\"/>\n <Setter Property=\"Background\" Value=\"{StaticResource Button.Static.Background}\"/>\n <Setter Property=\"BorderBrush\" Value=\"Transparent\"/>\n <Setter Property=\"Foreground\" Value=\"{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}\"/>\n <Setter Property=\"HorizontalContentAlignment\" Value=\"Center\"/>\n <Setter Property=\"VerticalContentAlignment\" Value=\"Center\"/>\n <Setter Property=\"Padding\" Value=\"4\"/>\n <Setter Property=\"Template\">\n <Setter.Value>\n <ControlTemplate TargetType=\"{x:Type Button}\">\n <Grid SnapsToDevicePixels=\"true\">\n <Rectangle x:Name=\"BackgroundVisual\" Fill=\"{TemplateBinding Background}\"/>\n <Rectangle x:Name=\"PressedVisual\" Fill=\"{DynamicResource Button.Pressed.Background}\" Opacity=\"0\"/>\n <Rectangle x:Name=\"DisabledVisual\" Fill=\"{DynamicResource Button.Disabled.Background}\" Opacity=\"0\"/>\n <ContentPresenter x:Name=\"contentPresenter\" Focusable=\"False\" HorizontalAlignment=\"{TemplateBinding HorizontalContentAlignment}\" Margin=\"{TemplateBinding Padding}\" RecognizesAccessKey=\"True\" SnapsToDevicePixels=\"{TemplateBinding SnapsToDevicePixels}\" VerticalAlignment=\"{TemplateBinding VerticalContentAlignment}\"/>\n </Grid>\n <ControlTemplate.Triggers>\n <Trigger Property=\"IsDefaulted\" Value=\"true\"/>\n <Trigger Property=\"IsMouseOver\" Value=\"true\">\n <Setter Property=\"Opacity\" TargetName=\"BackgroundVisual\" Value=\"0.6\"/>\n </Trigger>\n <Trigger Property=\"IsPressed\" Value=\"true\">\n <Setter Property=\"Opacity\" TargetName=\"PressedVisual\" Value=\"1\"/>\n </Trigger>\n <Trigger Property=\"IsEnabled\" Value=\"false\">\n <Setter Property=\"TextElement.Foreground\" TargetName=\"contentPresenter\" Value=\"{StaticResource Button.Disabled.Foreground}\"/>\n <Setter Property=\"Opacity\" TargetName=\"DisabledVisual\" Value=\"1\"/>\n </Trigger>\n </ControlTemplate.Triggers>\n </ControlTemplate>\n </Setter.Value>\n </Setter>\n <Setter Property=\"BorderThickness\" Value=\"0\"/>\n </Style>\n</Window.Resources>\n\n\nHere is how the style looks.\n\n\n\nHope this helps! :)",