Styling a button

The most common control that is used and which looks difficult yet easy to style is the button control. To style a button all you need to see is the direction of light when you press it. By direction of light, I mean, how and where the shadow should fall in order to give the user a feel of it being pressed. After all styling is all about observation and giving the user feeling of real time effects.

So here we zoom......

the button control which I have styled now has a glassy look and turns green on hover. You may change the colors according to your need by just changing the color code. It looks like this..

In normal state

on mouse over

<style x:Key="GlassBtn" TargetType="Button"> <setter Property="Background" Value="#FF1F3B53"/> <setter Property="Foreground" Value="#FF000000"/> <setter Property="Padding" Value="3"/> <setter Property="BorderThickness" Value="1"/> <setter Property="BorderBrush"> <Setter.Value> <lineargradientbrush EndPoint="0.5,1" StartPoint="0.5,0"> <gradientstop Color="#FFA3AEB9" Offset="0"/> <gradientstop Color="#FF8399A9" Offset="0.375"/> <gradientstop Color="#FF718597" Offset="0.375"/> <gradientstop Color="#FF617584" Offset="1"/> </LinearGradientBrush> </Setter.Value> </Setter> <setter Property="Template"> <Setter.Value> <controltemplate TargetType="Button"> <grid> <vsm:VisualStateManager.VisualStateGroups> <vsm:VisualStateGroup x:Name="CommonStates"> <vsm:VisualState x:Name="Normal"/> <vsm:VisualState x:Name="MouseOver"> <storyboard> <doubleanimationusingkeyframes BeginTime="00:00:00" Storyboard.TargetName="glow" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="00:00:00.0010000"> <splinedoublekeyframe KeyTime="00:00:00" Value="1"/> </DoubleAnimationUsingKeyFrames> <coloranimationusingkeyframes BeginTime="00:00:00" Storyboard.TargetName="glow" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Duration="00:00:00.0010000"> <splinecolorkeyframe KeyTime="00:00:00" Value="#008CAF33"/> </ColorAnimationUsingKeyFrames> <doubleanimationusingkeyframes BeginTime="00:00:00" Storyboard.TargetName="glow" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Offset)" Duration="00:00:00.0010000"> <splinedoublekeyframe KeyTime="00:00:00" Value="0"/> </DoubleAnimationUsingKeyFrames> <coloranimationusingkeyframes BeginTime="00:00:00" Storyboard.TargetName="glow" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Duration="00:00:00.0010000"> <splinecolorkeyframe KeyTime="00:00:00" Value="#FFA9CA54"/> </ColorAnimationUsingKeyFrames> <doubleanimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="glow" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Offset)"> <splinedoublekeyframe KeyTime="00:00:00" Value="1"/> </DoubleAnimationUsingKeyFrames> <doubleanimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="shine" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Offset)"> <splinedoublekeyframe KeyTime="00:00:00" Value="0.004"/> </DoubleAnimationUsingKeyFrames> <coloranimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="shine" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)"> <splinecolorkeyframe KeyTime="00:00:00" Value="#FF45494D"/> </ColorAnimationUsingKeyFrames> <coloranimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="shine" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)"> <splinecolorkeyframe KeyTime="00:00:00" Value="#998F8F8F"/> </ColorAnimationUsingKeyFrames> <doubleanimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="shine" Storyboard.TargetProperty="(UIElement.Opacity)"> <splinedoublekeyframe KeyTime="00:00:00" Value="0.5"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState> <vsm:VisualState x:Name="Pressed"> <storyboard> <coloranimationusingkeyframes Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"> <splinecolorkeyframe KeyTime="0" Value="#CC000000"/> </ColorAnimationUsingKeyFrames> <doubleanimationusingkeyframes Storyboard.TargetName="shine" Storyboard.TargetProperty="Opacity"> <splinedoublekeyframe KeyTime="0" Value="0.4"/> </DoubleAnimationUsingKeyFrames> <objectanimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="glow" Storyboard.TargetProperty="(UIElement.Visibility)"> <discreteobjectkeyframe KeyTime="00:00:00"> <DiscreteObjectKeyFrame.Value> <visibility>Collapsed</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState> <vsm:VisualState x:Name="Disabled"> <storyboard> <coloranimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"> <splinecolorkeyframe KeyTime="00:00:00" Value="#B2787878"/> </ColorAnimationUsingKeyFrames> <doubleanimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="glow" Storyboard.TargetProperty="(UIElement.Opacity)"> <splinedoublekeyframe KeyTime="00:00:00" Value="1"/> </DoubleAnimationUsingKeyFrames> <coloranimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="glow" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)"> <splinecolorkeyframe KeyTime="00:00:00" Value="#B26A6A6A"/> </ColorAnimationUsingKeyFrames> <coloranimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="glow" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)"> <splinecolorkeyframe KeyTime="00:00:00" Value="#33595959"/> </ColorAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState> </vsm:VisualStateGroup> <vsm:VisualStateGroup x:Name="FocusStates"> <vsm:VisualState x:Name="Focused"> <storyboard> <doubleanimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="glow" Storyboard.TargetProperty="(UIElement.Opacity)"> <splinedoublekeyframe KeyTime="00:00:00" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState> <vsm:VisualState x:Name="Unfocused"/> </vsm:VisualStateGroup> </vsm:VisualStateManager.VisualStateGroups> <border BorderBrush="#7F45494D" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4"> <border x:Name="border" Background="#7F000000" BorderBrush="#FF000000" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4"> <grid> <Grid.RowDefinitions> <rowdefinition Height="0.507*"/> <rowdefinition Height="0.493*"/> </Grid.RowDefinitions> <contentpresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Grid.RowSpan="2"/> <border Opacity="0" HorizontalAlignment="Stretch" x:Name="glow" Width="Auto" Grid.RowSpan="2" CornerRadius="4,4,4,4"> <Border.Background> <radialgradientbrush> <RadialGradientBrush.RelativeTransform> <transformgroup> <scaletransform ScaleX="1.702" ScaleY="2.243"/> <skewtransform AngleX="0" AngleY="0"/> <rotatetransform Angle="0"/> <translatetransform X="-0.368" Y="-0.152"/> </TransformGroup> </RadialGradientBrush.RelativeTransform> <gradientstop Color="#FF8CAF33" Offset="0"/> <gradientstop Color="#008DBDFF" Offset="1"/> </RadialGradientBrush> </Border.Background> </Border> <border HorizontalAlignment="Stretch" Margin="0,0,0,0" x:Name="shine" Width="Auto" CornerRadius="4,4,0,0"> <Border.Background> <lineargradientbrush EndPoint="0.494,0.889" StartPoint="0.494,0.028"> <gradientstop Color="#9945494D" Offset="0"/> <gradientstop Color="#333D4042" Offset="1"/> </LinearGradientBrush> </Border.Background> </Border> </Grid> </Border> </Border> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>