XAML Style: Orange Gel Button
I tossed up this XAML button style over the weekend (OrangeGelButton.xaml (6.78 KB)):
<resourcedictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<style targettype="Button" x:key="OrangeGel">
<Setter Property="FrameworkElement.Width" Value="NaN"/>
<Setter Property="FrameworkElement.MinWidth" Value="0"/>
<Setter Property="FrameworkElement.Height" Value="NaN"/>
<Setter Property="FrameworkElement.MinHeight" Value="30"/>
<Setter Property="Control.Padding" Value="4,4,4,4"/>
<Setter Property="FrameworkElement.VerticalAlignment" Value="Center"/>
<Setter Property="TextElement.Foreground">
<Setter.Value>
<SolidColorBrush>#FF7C4400</SolidColorBrush>
</Setter.Value>
</Setter>
<Setter Property="TextElement.FontSize" Value="12"/>
<Setter Property="TextElement.FontWeight" Value="SemiBold"/>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="#00FFFFFF">
<Border BorderBrush="#FF000000" CornerRadius="6,6,6,6" BorderThickness="1,1,0,0" Opacity="0.9">
<Border.BitmapEffect>
<BlurBitmapEffect Radius="1" />
</Border.BitmapEffect>
</Border>
<Border BorderBrush="#FFFFFFFF" CornerRadius="6,6,6,6" BorderThickness="0,0,0.6,0.6" Opacity="0.7" />
<Border Margin="1,1,1,1" CornerRadius="6,6,6,6" Name="background">
<Border.Background>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0" Color="#FFFBD19E" />
<GradientStop Offset="1" Color="#FFF68F15" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
<Grid Margin="1,1,1,1" ClipToBounds="True">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Ellipse Margin="10,3,10,3" Width="{TemplateBinding FrameworkElement.Width}" Fill="#FFFFFFFF" Opacity="0.3" Grid.Row="0" Grid.RowSpan="2">
<Ellipse.BitmapEffect>
<BlurBitmapEffect />
</Ellipse.BitmapEffect>
</Ellipse>
<Ellipse Width="{TemplateBinding FrameworkElement.Width}" Fill="#FFFFFFFF" Opacity="0.34" Grid.Row="0" />
</Grid>
</Border>
<Border Margin="1,1,1,1" BorderBrush="#FFFFFFFF" CornerRadius="6,6,6,6" BorderThickness="5,5,0,0" Opacity="0.3">
<Border.BitmapEffect>
<BlurBitmapEffect Radius="1" />
</Border.BitmapEffect>
</Border>
<Border Margin="1,1,1,1" BorderBrush="#FF000000" CornerRadius="6,6,6,6" BorderThickness="0,0,0.6,0.6" Opacity="1">
<Border.BitmapEffect>
<BlurBitmapEffect Radius="1" />
</Border.BitmapEffect>
</Border>
<ContentPresenter Margin="{TemplateBinding Control.Padding}" HorizontalAlignment="Center" VerticalAlignment="Center" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" Content="{TemplateBinding ContentControl.Content}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="UIElement.IsMouseOver" Value="True">
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<Storyboard.Children>
<ColorAnimation To="#FFFBD19E" FillBehavior="HoldEnd" Duration="00:00:00.4000000" Storyboard.TargetName="background" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops).[0].(GradientStop.Color)" />
<ColorAnimation To="#FFF68F15" FillBehavior="HoldEnd" Duration="00:00:00.4000000" Storyboard.TargetName="background" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops).[1].(GradientStop.Color)" />
</Storyboard.Children>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<Storyboard.Children>
<ColorAnimation To="#FFFAF688" FillBehavior="HoldEnd" Duration="00:00:00.2000000" Storyboard.TargetName="background" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops).[0].(GradientStop.Color)" />
<ColorAnimation To="#FFF6D415" FillBehavior="HoldEnd" Duration="00:00:00.2000000" Storyboard.TargetName="background" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops).[1].(GradientStop.Color)" />
</Storyboard.Children>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="ButtonBase.IsPressed" Value="True">
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<Storyboard.Children>
<ColorAnimation To="#FFFAF688" FillBehavior="Stop" Duration="00:00:00.4000000" Storyboard.TargetName="background" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops).[0].(GradientStop.Color)" />
<ColorAnimation To="#FFF6D415" FillBehavior="Stop" Duration="00:00:00.4000000" Storyboard.TargetName="background" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops).[1].(GradientStop.Color)" />
</Storyboard.Children>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<Storyboard.Children>
<ColorAnimation To="#FFFAA182" FillBehavior="HoldEnd" Duration="00:00:00.2000000" Storyboard.TargetName="background" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops).[0].(GradientStop.Color)" />
<ColorAnimation To="#FFFD6420" FillBehavior="HoldEnd" Duration="00:00:00.2000000" Storyboard.TargetName="background" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops).[1].(GradientStop.Color)" />
</Storyboard.Children>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</style>
</resourcedictionary>