接下来是CSS，先看一个，首先当然是画两个竖直的矩形做一个暂停图标，这里直接用伪元素画，有什么特别的“高度为0”，因为如前所述，为了创建“形状变换”而不是“颜色淡入淡出”，必须使用border-width而不是height（记得加上过渡时间）。.a{位置：绝对；顶部：50px；左：50px；宽度：100px；高度：100px；边界半径：50%；背景：#363；transition:.2s;}.a:before,.a:after{content:"";位置：绝对；宽度：12px；高度：0；顶部：24px；边框样式：实心；border-width:0054px0;}.a:before{left:27px;:#fffrgba(255,255,255,0)#fffrgba(255,255,255,0);transition:.2s;}.a:after{left:54px;边框颜色：rgba(255,255,255,0)rgba(255,255,255,0)#fff#fff;transition:.2s;}主体设置好之后，还需要设置hover和active的效果。这里会用到transform的scale和rotate。除了变形，仔细一看，width和borderwidth都变了，再加上位置的匹配，你可以很轻松的做出两个长方形，鼠标上移变成三角形，下移变成正方形！（如果给scale设置了两个值，分别是宽和长的变换比例）。a:hover:before{top:26px;左：45px；宽度：0；变换：缩放（2,1.17）旋转（90度）；边框宽度：0024px24px；}.a:hover:after{top:53px;左：45px；宽度：0；变换：缩放（2,1.17）旋转（90度）；边框宽度：024px24px0;}.a:hover{背景：#095;transition:.4s;}.a:active:before{border-width:0024px0;宽度：22px；顶部：26px；左：38px；transition:.4s;}.a:active:after{border-width:0024px0;宽度：22px；:.4s;}.a:active{变换:旋转(180deg);background:#0a9;}完成后的效果是这样的然后还有一个，原理基本一样，只是简单很多，不需要变形，调整角度和长宽就可以了！.b{位置：绝对；顶部：50px；左：160px；宽度：100px；高度：100px；边界半径：50%；背景：#09c；transition:.2s;}.bi{position:absolute;堵塞;宽度：56px；高度：10px；背景：#fff；左：22px；边界半径：2px；transition:.2s;}.b1{top:24px;}.b2{top:44px;}.b3{top:64px;}.b:hover.b1{left:15px;宽度：70px；transform:translateY(20px)rotate(45deg);}.b:hover.b3{left:15px;宽度：70px；transform:translateY(-20px)rotate(-45deg);}.b:hover.b2{left:50px;宽度：0；}.b：悬停{背景：#c00；}.b：活动.b1{宽度：40px；变换：translateY(11px)旋转(-45deg);transition:.3s;}.b:active.b3{width:40px;变换：translateY(-7px)rotate(45deg);transition:.3s;}.b:active.b2{top:46px;左：22px；宽度：60px；转换：.3s;}.b:active{转换：旋转（45deg）;background:#f70;}完成后的效果是这样的。以上是纯CSS制作的MaterialDesign风格的按钮。相信你熟练之后能做出更好的应用！