Nathan Dunlap

Nathan Dunlap

The Gel Button Strikes Back

 

Click here to download the xaml

<FlowPanel xmlns="http://schemas.microsoft.com/2003/xaml" xmlns:def="Definition">
    <FlowPanel.Resources>
        <Style>
            <Button ClipToBounds="False" Margin="5" Cursor="Hand" 
                    Background="#3791dd" Width="150" Height="35"/>
 <Style.VisualTree>
    <Grid Width="*Alias(Target = Width)" Height="*Alias(Target = Height)"  >
   
       <Rectangle def:StyleID="DropShadow"  RadiusX="15" RadiusY="15" 
        Fill="#66000000" Stroke="transparent"  >
            <Rectangle.ImageEffect>
                <ImageEffectBlur Radius="7"/>
            </Rectangle.ImageEffect>
       </Rectangle>

        <Rectangle def:StyleID="GelBackground" Opacity="1" RadiusX="15" RadiusY="15"
         Fill="*Alias(Target = Background)"  Stroke="VerticalGradient transparent #cc000000"
         StrokeThickness="1" Grid.Bottom="3" Grid.Right="3"   />

        <Rectangle def:StyleID="Shine1" RadiusX="12" RadiusY="12"  Opacity="0.75"
         Fill="VerticalGradient #ffffff transparent" Stroke="transparent" Grid.Top="3"
         Grid.Bottom="0" Grid.Right="6" Grid.Left="3"  Height="25px" >
            <Rectangle.ImageEffect>
                <ImageEffectBlur Radius="4"/>
            </Rectangle.ImageEffect>
        </Rectangle>
     
        <Rectangle def:StyleID="Shine2"  RadiusX="4" RadiusY="4" Fill=" #66ffffff"
         Stroke="transparent" Grid.Top="3" Grid.Bottom="0" Grid.Right="15" Grid.Left="12" 
         Height="5px" >
            <Rectangle.ImageEffect>
                <ImageEffectBlur Radius="6"/>
            </Rectangle.ImageEffect>
        </Rectangle>

         <ContentPresenter
          ContentControl.Content="*Alias(Target = Content)"
          Text.FontFamily="Segoe" Text.Foreground="black" Text.FontSize="13pt"
          Grid.Top="1" Grid.Bottom="Auto" Grid.Right="Auto" Grid.Left="Auto" />
    </Grid>
    </Style.VisualTree>
        <Style.VisualTriggers>
            <PropertyTrigger Property="IsMouseOver" Value="true">
                <Set Target="GelBackground" PropertyPath="Fill" Value="limegreen" />
            </PropertyTrigger>
        </Style.VisualTriggers>
    </Style>
</FlowPanel.Resources>

    <Button>Push Me!</Button>

</FlowPanel>

PostTypeIcon
8,194 Views