[CSS动效][按钮篇] 适用于 Material 的扁平化按钮

CSS动效学习与巧妙应用

因现在的前端愈发卷，玩出一手花动效，在不影响交互的前提下提供更有趣的交互动画势必可以让你的页面充满活力。

本专栏将从页面常用基本组件入手，提供 原生Vue组件 实现

案例效果

具体实现

按钮雏形

第一步，绘制按钮

• 为按钮定义宽度高度，加上padding避免填充其他内容的时候直接靠边，比较丑。
• 为按钮添加居中效果 当line-height与整体height相同时，文字将垂直居中 设置 text-align: center 进行水平居中
• 为按钮添加鼠标手势 即使用 cursor: pointer 让鼠标移动到上面的时候显示为 可点击 的手势
• 禁止按钮文本被选中 避免出现一直点的时候选中文本 相关代码如下：

// HTML
<div class='MaterialBtn-Container'>你好，CSS动效</div>

// CSS
.MaterialBtn-Container {padding: 4px;width: 150px;height: 70px;line-height: 70px;text-align: center;cursor: pointer;user-select: none;background: #262626;
} 

第二步，点击效果

通过案例，可以发现，当按钮被点击时将出现缩小并且伴随着透明度变化

• 缩小通过 transform 中的 s