[WPF] 抄一个 CSS3 实现的按钮

1. 来源

继上一篇文章模仿了一下这个按钮，这篇文章索性抄一下，连动画都模仿过来，顺便熟习下 CSS3。原版：

纯CSS3实现质感细腻丝滑按钮

2. 实现

第一步

第一步先做最外层的 Border，并在中间的文字加上一个阴影。这时候文字会有些模糊，在样式上加上 会有些改善。

第二步

然后放一层只有上边框的 Border。注意这里不能高度为 1 像素的 Line，因为要配合圆角的弯曲。

第三步

放个遮罩层增加一点立体感。

第四步

复制一个外边框并应用 DropShadowEffect，用于展示下边缘的立体感，以及用于 MouseOver 状态的动画。

第五步

最后需要一个内阴影，用于 Pressed 状态的动画，可以参考这篇文章：

3. 成果

再增加一些动画，成果如下：

4. 源码

https://github.com/DinoChan/wpf_design_and_animation_lab