如何用CSS实现Material Design风格按钮

这篇文章主要介绍“如何用CSS实现Material Design风格按钮”，在日常操作中，相信很多人在如何用CSS实现Material Design风格按钮问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何用CSS实现Material Design风格按钮”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

其实Material Design的扁平化icon按钮，这类型的按钮往往只利用几何色块的变化，就能抓住使用者的眼光，并且从几何形状中明白按钮的含意，这也是Material Design非常强调的设计理念和精髓。

如果你依然在编程的世界里迷茫，不知道自己的未来规划，可以加入web前端学习交流秋秋圈：767273102 里面可以与大神一起交流并走出迷茫。新手可免费领取学习资料，看看前辈们是如何在编程的世界里傲然前行不停更新最新的教程和学习方法（详细的前端项目实战教学视频），有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入

应用重点与原理

在这篇我纯粹利用CSS，就做出了Material Design风格的按钮，其实没有很难，比较需要知道的重点如下：

• 伪元素before和after的应用

伪元素在里头扮演相当重要的角色，利用伪元素我们可以产生两个不在HTML里头的类div，可以大幅降低代码的复杂程度。

• div的自身宽度与边框

由于我们要进行三角形与矩形之间的形变，虽然三角形可由边框产生，但却无法做出漂亮的形变效果（用背景色的话就会有淡入淡出的现象），所以必须要用边框宽度和矩形大小去搭配，当边框变细的时候，矩形变大，如此一来就可以做出三角形与矩形互相变换的效果啰，下图的红色是纯粹用颜色变换，蓝色则是用边框宽度与div宽度变换，效果应该很明显吧！

• transform的应用

CSS里所有的形变都是藉由transform来完成（必要时请加各个浏览器的前坠字），示例里头会用到scale与rotate这两个变形属性。

实现Material Design风格按钮

了解原理之后，先来看一下HTML代码，代码里面有两个主要的div分别是a和b，a的话是利用伪元素来进行变换，b的内容还有三个小i分别是b1、b2和b3（都会宣告为block属性），因为大于两个就无法纯粹使用伪元素，所以直接用三个block元素来表示比较快。

<div class="a"></div>
<div class="b">
  <i class="b1"></i>
  <i class="b2"></i>
  <i class="b3"></i>
</div>

接下来就是CSS了，先看到a，首先当然是先画两条垂直的矩形，做出暂停的icon，这里直接利用伪元素来画，比较特别的是「高度为0」，因为在上面有说过，为了要塑造一个「形状的变换」，而不是「颜色的淡入淡出」，所以必须用border-width来代替高度（记得加上transition的渐变时间）。

.a{
  position:absolute;
  top:50px;
  left:50px;
  width:100px;
  height:100px;
  border-radius:50%;
  background:#363;
  transition:.2s;
}
.a:before,.a:after{
  content:"";
  position:absolute;
  width:12px;
  height:0;
  top:24px;
  border-style:solid;
  border-width:0 0 54px 0;
}
.a:before{
  left:27px;
  border-color:#fff rgba(255,255,255,0) #fff rgba(255,255,255,0);
  transition:.2s;
}
.a:after{
  left:54px;
  border-color: rgba(255,255,255,0) rgba(255,255,255,0) #fff #fff ;
  transition:.2s;
}

主体设定好之后，接着就要来设定hover和active的效果，这里就会用transform的scale和rotate，除了变形，仔细看一下，宽度和border宽度都改变了，加上位置的互相搭配，就可以很容易地做出两个矩形在鼠标移上去的时候变成三角形，点下去的时候变成正方形啰！（scale如果设定两个值，分别就是宽与长的变形比例）

.a:hover:before{
  top:26px;
  left:45px;
  width:0;
  transform:scale(2,1.17) rotate(90deg);
  border-width:0 0 24px 24px; 
}
.a:hover:after{
  top:53px;
  left:45px;
  width:0;
  transform:scale(2,1.17) rotate(90deg);
  border-width:0 24px 24px 0; 
}
.a:hover{
  background:#095;
  transition:.4s;
}
.a:active:before{
  border-width:0 0 24px 0;
  width:22px;
  top:26px;
  left:38px;
  transition:.4s;
}
.a:active:after{
  border-width:0 0 24px 0;
  width:22px;
  top:50px;
  left:38px;
  transition:.4s;
}
.a:active{
  transform:rotate(180deg);
  background:#0a9;
}

完成的效果就是长这样。

接着是另外一个，原理基本上大同小异，然而不需要做形状变换反而简单许多，只需要调整角度和长宽就好啰！

.b{
  position:absolute;
  top:50px;
  left:160px;
  width:100px;
  height:100px;
  border-radius:50%;
  background:#09c;
  transition:.2s;
}
.b i{
  position:absolute;
  display:block;
  width:56px;
  height:10px;
  background:#fff;
  left:22px;
  border-radius:2px;
  transition:.2s;
}
.b1{
  top:24px;
}
.b2{
  top:44px;
}
.b3{
  top:64px;
}
.b:hover .b1{
  left:15px;
  width:70px;
  transform:translateY(20px) rotate(45deg);
}
.b:hover .b3{
  left:15px;
  width:70px;
  transform:translateY(-20px) rotate(-45deg);
}
.b:hover .b2{
  left:50px;
  width:0;
}
.b:hover{
  background:#c00;
}
.b:active .b1{
  width:40px;
  transform:translateY(11px) rotate(-45deg);
  transition:.3s;
}
.b:active .b3{
  width:40px;
  transform:translateY(-7px) rotate(45deg);
  transition:.3s;
}
.b:active .b2{
  top:46px;
  left:22px;
  width:60px;
  transition:.3s;
}
.b:active{
  transform:rotate(45deg);
  background:#f70;
}

完成的效果长这样。

以上就是纯粹利用CSS做出来的Material Design风格按钮，相信熟练之后就可以做出更多不错的应用！

到此，关于“如何用CSS实现Material Design风格按钮”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！