在网站设计中，按钮常常被用作交互的重要元素之一。而随着越来越多的网站采用交互设计，按钮在点击的时候，渐变、缩放或者弹出等动画效果也开始越来越受欢迎。
要实现这些按钮动画效果，CSS 起到了关键作用。下面我们来看一个实现 CSS 手机按钮动画的例子。
.btn {display: inline-block;padding: 10px 20px;border: 1px solid #666;font-size: 16px;font-weight: bold;position: relative;overflow: hidden;transition: all 0.3s ease;cursor: pointer;}.btn:before {content: '';width: 0%;height: 100%;position: absolute;top: 0;left: 0;background: #3f51b5;transition: all 0.3s ease;z-index: -1;}.btn:hover:before {width: 100%;}在上述代码中，我们定义了一个.button 类。其中使用了 before 伪元素来定义动画效果。由于 before 元素默认是在 button 元素的上面，所以我们需要给 before 设定 z-index:-1 使其在 button 元素下面。
除此之外，我们还给 button 元素定义了 overflow:hidden 属性，来防止 before 元素在动画动过程中溢出。而最后一行的 cursor:pointer 属性则是为按钮定义手型光标。
在 hover 时，我们将 before 的宽度设为 100% ，则可以形成从左到右的颜色渐变过程。效果如下：
通过这样的效果，我们可以更加生动地呈现用户点击交互的过程，让页面更加生动。
上一篇：css按钮添加手势图片
下一篇：css按钮鼠标悬停
