Blendを使ってButtonのホバーエフェクトを作る Part4
今回は、Web系のデザインでよくありそうなタイプのボタンを作ります。
CSSのみでボタンデザイン #1
厚みを持ったボタンで、クリック時にはボタンがへこむような表現です。
ボタンの厚み部分はぼかしをなくしたDropShadowEffectで作成しています。
<ControlTemplate x:Key="ButtonControlTemplate7" TargetType="{x:Type Button}"> <Border x:Name="border" Background="#FF1ABC9C" CornerRadius="4" RenderTransformOrigin="0.5,0.5"> <Border.RenderTransform> <TransformGroup> <ScaleTransform/> <SkewTransform/> <RotateTransform/> <TranslateTransform/> </TransformGroup> </Border.RenderTransform> <Border.Effect> <DropShadowEffect ShadowDepth="3" Direction="270" BlurRadius="0" Color="#FF0E8C73"/> </Border.Effect> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <VisualState x:Name="MouseOver"> <Storyboard> <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="border"> <EasingColorKeyFrame KeyTime="0" Value="#FF31C8AA"/> </ColorAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.Color)" Storyboard.TargetName="border"> <EasingColorKeyFrame KeyTime="0" Value="#FF23A188"/> </ColorAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Pressed"> <Storyboard> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.ShadowDepth)" Storyboard.TargetName="border"> <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"> <EasingDoubleKeyFrame.EasingFunction> <CubicEase EasingMode="EaseInOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="border"> <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="3"> <EasingDoubleKeyFrame.EasingFunction> <CubicEase EasingMode="EaseInOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="border"> <EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FF31C8AA"/> </ColorAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.Color)" Storyboard.TargetName="border"> <EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FF23A188"/> </ColorAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Disabled"/> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <ContentPresenter TextBlock.Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"> <ContentPresenter.Effect> <DropShadowEffect ShadowDepth="1" BlurRadius="1" Direction="270" Color="#4C000000"/> </ContentPresenter.Effect> </ContentPresenter> </Border> </ControlTemplate>
CSSのみでボタンデザイン #2
これも上の#1とほぼ同じです。
<ControlTemplate x:Key="ButtonControlTemplate8" TargetType="{x:Type Button}"> <Border x:Name="border" Background="#FFF7D034" CornerRadius="4" RenderTransformOrigin="0.5,0.5"> <Border.RenderTransform> <TransformGroup> <ScaleTransform/> <SkewTransform/> <RotateTransform/> <TranslateTransform/> </TransformGroup> </Border.RenderTransform> <Border.Effect> <DropShadowEffect ShadowDepth="3" Direction="270" BlurRadius="0" Color="#FFF7BA59"/> </Border.Effect> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <VisualState x:Name="MouseOver"> <Storyboard> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.ShadowDepth)" Storyboard.TargetName="border"> <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="7"> <EasingDoubleKeyFrame.EasingFunction> <CubicEase EasingMode="EaseInOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="border"> <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="-4"> <EasingDoubleKeyFrame.EasingFunction> <CubicEase EasingMode="EaseInOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Pressed"> <Storyboard> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.ShadowDepth)" Storyboard.TargetName="border"> <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"> <EasingDoubleKeyFrame.EasingFunction> <CubicEase EasingMode="EaseInOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="border"> <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="3"> <EasingDoubleKeyFrame.EasingFunction> <CubicEase EasingMode="EaseInOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Disabled"/> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <ContentPresenter TextBlock.Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"> <ContentPresenter.Effect> <DropShadowEffect ShadowDepth="1" BlurRadius="1" Direction="270" Color="#4C000000"/> </ContentPresenter.Effect> </ContentPresenter> </Border> </ControlTemplate>
CSSのみでボタンデザイン #3
グラデーションも使って立体感を付けたデザインです。
クリック時にボタン内側に影を落とすことで、ボタンのへこんだ状態を表現しています
DropShadowを内側にかけるのは、↓を参考にやってみました。
http://www.codeproject.com/Articles/225076/Creating-Inner-Shadows-for-WPF-and-Silverlight
ただ、Borderの丸いコーナーの外側に黒い影などが見えてしまってます。
この辺を直さないと使えないかな。。。
<ControlTemplate x:Key="ButtonControlTemplate9" TargetType="{x:Type Button}"> <Border x:Name="border" CornerRadius="4" BorderBrush="#FF15AEEC" BorderThickness="1" ClipToBounds="True"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <VisualState x:Name="MouseOver"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)" Storyboard.TargetName="border"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FF1AB0EC" Offset="0"/> <GradientStop Color="#FF1A92C2" Offset="1"/> </LinearGradientBrush> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border"> <EasingColorKeyFrame KeyTime="0" Value="#FF1090C3"/> </ColorAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Pressed"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)" Storyboard.TargetName="border"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <SolidColorBrush Color="#FF1A92C2"/> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border"> <EasingColorKeyFrame KeyTime="0" Value="#FF1090C3"/> </ColorAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="contentPresenter"> <EasingColorKeyFrame KeyTime="0:0:0" Value="#FF1679A1" /> </ColorAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.Color)" Storyboard.TargetName="contentPresenter"> <EasingColorKeyFrame KeyTime="0" Value="#88FFFFFF"/> </ColorAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.Opacity)" Storyboard.TargetName="border1"> <EasingDoubleKeyFrame KeyTime="0" Value="1"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.BlurRadius)" Storyboard.TargetName="border1"> <EasingDoubleKeyFrame KeyTime="0" Value="7"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Disabled"/> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Border.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FF49C0F0" Offset="0"/> <GradientStop Color="#FF2CAFE3" Offset="1"/> </LinearGradientBrush> </Border.Background> <Grid> <ContentPresenter x:Name="contentPresenter" TextBlock.Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"> <ContentPresenter.Effect> <DropShadowEffect ShadowDepth="1" BlurRadius="1" Direction="270" Color="#4C000000"/> </ContentPresenter.Effect> </ContentPresenter> <Border x:Name="border1" BorderBrush="Black" BorderThickness="1" Margin="-2" CornerRadius="4"> <Border.Effect> <DropShadowEffect ShadowDepth="0" Opacity="0"/> </Border.Effect> </Border> </Grid> </Border> </ControlTemplate>