Preview

Inactive

Inactive State

Over

Over State

Usage

<Button Width="60" x:Name="browse" Style="{StaticResource SwooshButton}">Browse</Button>

App.xaml

<Path x:Key="swoosh" Fill="#FFFFFFFF" Stretch="Fill" Stroke="{x:Null}" Data="M104.13127,424.27133 C111.2973, 
      417.55311 118.88735,410.25972 146.45562,413.87825 167.20385,416.60159 179.07061,413.6333 182.46928,411.16885 
      183.95792,410.0894 182.80327,404.3807 182.80327,404.3807 L104.22394,404.32851 z"/>

<Style x:Key="SwooshButton" TargetType="ButtonBase">
    <Setter Property="TextElement.Foreground" Value="#FFFFFFFF" />
    <Setter Property="Cursor" Value="Hand" />
    <Setter Property="TextElement.FontSize" Value="12"/>
    <Setter Property="TextElement.FontFamily" Value="Arial"/>
    <Setter Property="Template" Value="{DynamicResource BlueSwoosh}"/>
</Style>
    
<Style x:Key="RedSwooshButton" TargetType="ButtonBase" BasedOn="{StaticResource SwooshButton}">
    <Setter Property="Template" Value="{DynamicResource RedSwoosh}"/>
</Style>
    
<Style x:Key="GreenSwooshButton" TargetType="ButtonBase" BasedOn="{StaticResource SwooshButton}">
    <Setter Property="Template" Value="{DynamicResource GreenSwoosh}"/>
</Style>
    
<ControlTemplate x:Key="BlueSwoosh">
    <Grid Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
        <Rectangle Stroke="{x:Null}" RadiusX="4" RadiusY="4">
            <Rectangle.Fill>
                <SolidColorBrush x:Name="fillb" Color="#FFa0a0a0" />
            </Rectangle.Fill>
            <Rectangle.BitmapEffect>
                <DropShadowBitmapEffect Color="#FF000000" ShadowDepth="3" Softness="0.2"/>
            </Rectangle.BitmapEffect>
        </Rectangle>
        <Rectangle Fill="#33FFFFFF" Stroke="{x:Null}" RadiusX="4" RadiusY="4">
            <Rectangle.OpacityMask>
                <VisualBrush Visual="{StaticResource swoosh}" />
            </Rectangle.OpacityMask>
        </Rectangle>
        <ContentPresenter Margin="{TemplateBinding Control.Padding}" HorizontalAlignment="Center" VerticalAlignment="Center" 
                          ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" 
                          Content="{TemplateBinding ContentControl.Content}" />
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Trigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation To="#FFa0a0a0" FillBehavior="HoldEnd" Duration="00:00:00.2000000" 
                                        Storyboard.TargetName="fillb" Storyboard.TargetProperty="(SolidColorBrush.Color)" />
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.ExitActions>
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation To="#FF1b8db4" FillBehavior="HoldEnd" Duration="00:00:00.2000000" 
                                        Storyboard.TargetName="fillb" Storyboard.TargetProperty="(SolidColorBrush.Color)" />
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>
    
<ControlTemplate x:Key="RedSwoosh">
    <Grid Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
        <Rectangle Stroke="{x:Null}" RadiusX="4" RadiusY="4">
            <Rectangle.Fill>
                <SolidColorBrush x:Name="fillb" Color="#FFa0a0a0" />
            </Rectangle.Fill>
            <Rectangle.BitmapEffect>
                <DropShadowBitmapEffect Color="#FF000000" ShadowDepth="3" Softness="0.2"/>
            </Rectangle.BitmapEffect>
        </Rectangle>
        <Rectangle Fill="#33FFFFFF" Stroke="{x:Null}" RadiusX="4" RadiusY="4">
            <Rectangle.OpacityMask>
                <VisualBrush Visual="{StaticResource swoosh}" />
            </Rectangle.OpacityMask>
        </Rectangle>
        <ContentPresenter Margin="{TemplateBinding Control.Padding}" HorizontalAlignment="Center" VerticalAlignment="Center" 
                          ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" 
                          Content="{TemplateBinding ContentControl.Content}" />
    </Grid>
    <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Trigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation To="#FFa0a0a0" FillBehavior="HoldEnd" Duration="00:00:00.2000000" 
                                            Storyboard.TargetName="fillb" Storyboard.TargetProperty="(SolidColorBrush.Color)" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.ExitActions>
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation To="#FFb41b1b" FillBehavior="HoldEnd" Duration="00:00:00.2000000" 
                                            Storyboard.TargetName="fillb" Storyboard.TargetProperty="(SolidColorBrush.Color)" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
            <Setter Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>
    
<ControlTemplate x:Key="GreenSwoosh">
    <Grid Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
        <Rectangle Stroke="{x:Null}" RadiusX="4" RadiusY="4">
            <Rectangle.Fill>
                <SolidColorBrush x:Name="fillb" Color="#FFa0a0a0" />
            </Rectangle.Fill>
            <Rectangle.BitmapEffect>
                <DropShadowBitmapEffect Color="#FF000000" ShadowDepth="3" Softness="0.2"/>
            </Rectangle.BitmapEffect>
        </Rectangle>
        <Rectangle Fill="#33FFFFFF" Stroke="{x:Null}" RadiusX="4" RadiusY="4">
            <Rectangle.OpacityMask>
                <VisualBrush Visual="{StaticResource swoosh}" />
            </Rectangle.OpacityMask>
        </Rectangle>
        <ContentPresenter Margin="{TemplateBinding Control.Padding}" HorizontalAlignment="Center" VerticalAlignment="Center" 
                          ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" 
                          Content="{TemplateBinding ContentControl.Content}" />
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Trigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation To="#FFa0a0a0" FillBehavior="HoldEnd" Duration="00:00:00.2000000" 
                                        Storyboard.TargetName="fillb" Storyboard.TargetProperty="(SolidColorBrush.Color)" />
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.ExitActions>
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation To="#FF34b41b" FillBehavior="HoldEnd" Duration="00:00:00.2000000" 
                                        Storyboard.TargetName="fillb" Storyboard.TargetProperty="(SolidColorBrush.Color)" />
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>