CSS本领专栏：一日一例 3.纯CSS实现炫酷多彩按钮殊效

各人好，本日是 CSS本领专栏：一日一例 第三篇《纯CSS实现炫酷多彩按钮殊效》
先看图：

开工前的预备工作

正如昨日所讲，为了案例的表现，也处于誊写的风俗，在本日的案例开工前，先把昨天的预备工作重做一遍。

  

• 扫除欣赏器的默认样式  
  
• 界说页面根本颜色  
  
• 设定body的样式  
  
• 扫除button控件的默认边框  
  
• 给按钮安一个家
  

好了，具体过程请参考本专栏第一篇的文章：《CSS本领 - 一日一例 （1）：会讨好的热情按钮》。废话不多说，我们开工！
开工啦！

第一步：根本页面结构

1. <div class="container">
2.       <button class="base" >酷炫多彩的按钮</button>
3. </div>

复制代码

第二步：按钮根本样式

这里于昨天的样式也是一样的，我在前的文章说过：为了实现更多按钮的案例，我把大多数按钮通用的样式写在了一起。本日，再把它复制过来。

1. .base{
2.   position: relative;   
3.   padding: 1rem 3rem; /* 用 padding 撑起按钮的宽度和高度 ，并确保了按钮文字水平方向居中 */
4.   font-family: "微软雅黑", sans-serif;
5.   font-size: 1.5rem;  
6.   line-height: 1.5rem; /* 行高和字号大小相等，可以实现按钮文字在按钮内垂直居中 */
7.   font-weight:700;
8.   color: var(--color);  /* 文字颜色为预定义的前景色 */
9.   cursor: pointer;   /* 鼠标移动到按钮上时候的形状：手型 */
10.   user-select: none;  /* 让用户不能选择按钮上的文字 */
11.   white-space: nowrap; /* 避免英文单词间的空格导致文字换行 */
12.   border-radius: 2rem;
13.   text-decoration: none;
14.   text-transform:uppercase; /* 字母自动修正为大写 */
15.   transition: all .5s; /* 按钮响应动画效果的持续时间 */
16. }

复制代码

如许，我们的按钮的根本样例就实现了。