怎么用纯CSS Material Design风格按钮

这篇文章主要讲解了“怎么用纯CSS Material Design风格按钮”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用纯CSS Material Design风格按钮”吧！

　　transfORM的应用

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

　　先来看一下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风格按钮这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！