<Canvas Width="100" Height="35"
           Canvas.Left="211" Canvas.Top="54"
           x:Name="SimpleButton"
           MouseLeftButtonDown="buttonMouseLeftButtonDown">
           <Rectangle x:Name="SimpleButtonSurround"
               Width="100" Height="35"
               Fill="#FFECECEC"
               Stroke="#FF000000"
               RadiusX="5"
               RadiusY="5" />
           <TextBlock Width="58" Height="24"
               Canvas.Left="40"
               Canvas.Top="7"><Run Text="Ok"/></TextBlock>
	</Canvas>

    function buttonMouseLeftButtonDown(sender, keyEventArgs)
    {
	   alert("Hello world!");
    }

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Height="480" Width="640">

   <Canvas.Resources>
     <Storyboard x:Name="GlassButton_glow_enter">
        <DoubleAnimationUsingKeyFrames
          Storyboard.TargetName="GlassButton_glow"
          Storyboard.TargetProperty="Opacity">
          <SplineDoubleKeyFrame KeyTime="00:00:00.30" Value="1" />
        </DoubleAnimationUsingKeyFrames>
      </Storyboard>
      <Storyboard x:Name="GlassButton_glow_leave">
        <DoubleAnimationUsingKeyFrames
           Storyboard.TargetName="GlassButton_glow"
           Storyboard.TargetProperty="Opacity">
           <SplineDoubleKeyFrame KeyTime="00:00:00.30" Value="0" />
         </DoubleAnimationUsingKeyFrames>
      </Storyboard>
   </Canvas.Resources>

   <Canvas x:Name="GlassButton"
       Canvas.Top="150" Canvas.Left="200"
       Height="34" Width="180"
       MouseLeftButtonDown="onMouseDown"
       MouseLeftButtonUp="onMouseUp"
       MouseMove="onMouseMove"
	MouseEnter="GlassButtonMouseEnter" MouseLeave="GlassButtonMouseLeave">

      <!-- Outer border of the button... just the stroke of the rectangle -->
      <Rectangle Width="180" Height="34"
          RadiusX="7" RadiusY="7"
          StrokeThickness="1" Stroke="#FFFFFFFF"/>

      <!-- Next in black border, and a somewhat opaque fill -->
      <Rectangle Canvas.Top="1" Canvas.Left="1"
          Width="178" Height="32"
          RadiusX="6" RadiusY="6"
          Fill="#7F000000" Stroke="#FF000000" StrokeThickness="1" />

      <!-- Radial gradient to give a glow to the button when rolled over -->
      <Rectangle x:Name="GlassButton_glow"
         Canvas.Top="2" Canvas.Left="2"
         Width="176" Height="30"
         RadiusX="5" RadiusY="5" Opacity="0">
         <Rectangle.Fill>
            <RadialGradientBrush>
               <RadialGradientBrush.RelativeTransform>
                  <TransformGroup>
                     <ScaleTransform ScaleX="1.702" ScaleY="2.243"/>
                     <TranslateTransform X="-0.368" Y="-0.152"/>
                  </TransformGroup>
               </RadialGradientBrush.RelativeTransform>
               <GradientStop Color="#B28DBDFF" Offset="0" />
               <GradientStop Color="#008DBDFF" Offset="1" />
            </RadialGradientBrush>
         </Rectangle.Fill>
      </Rectangle>

      <TextBlock x:Name="GlassButton_text"
          Canvas.Left="50" Canvas.Top="5"
          Foreground="#FFFFFFFF" Text="Glass Button" />

      <!-- over the top of part of the text is a lighter opaque gradient,
           clipped to the top half of the button -->
      <Rectangle Canvas.Left="2" Canvas.Top="2"
         Width="176" Height="30" RadiusX="5" RadiusY="5">
         <Rectangle.Fill>
            <LinearGradientBrush StartPoint="0.494,0.028"
               EndPoint="0.494, 0.889" >
               <GradientStop Color="#99FFFFFF" Offset="0" />
               <GradientStop Color="#33FFFFFF" Offset="1" />
            </LinearGradientBrush>
         </Rectangle.Fill>

         <Rectangle.Clip>
            <RectangleGeometry Rect="0,0,176,15"/>
         </Rectangle.Clip>

      </Rectangle>

   </Canvas>

</Canvas>

function ClickMe(){
   alert("ClickMe");
}

function GlassButtonMouseEnter(sender, args){
   var sb = sender.findName(sender.Name + "_glow_enter");
   sb.begin();
}

function GlassButtonMouseLeave(sender, args){
   var sb = sender.findName(sender.Name + "_glow_leave");
   sb.begin();
}