怎么用純CSS Material Design風(fēng)格按鈕

這篇文章主要講解了“怎么用純CSS Material Design風(fēng)格按鈕”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么用純CSS Material Design風(fēng)格按鈕”吧！

　　transform的應(yīng)用

　　CSS里所有的形變都是藉由transform來完成（必要時請加各個瀏覽器的前墜字），示例里頭會用到scale與rotate這兩個變形屬性。

　　先來看一下HTML代碼，代碼里面有兩個主要的div分別是a和b，a的話是利用偽元素來進(jìn)行變換，b的內(nèi)容還有三個小i分別是b1、b2和b3（都會宣告為block屬性），因?yàn)榇笥趦蓚€就無法純粹使用偽元素，所以直接用三個block元素來表示比較快。

　　<div class="a"></div>

　　<div class="b">

　　<i class="b1"></i>

　　<i class="b2"></i>

　　<i class="b3"></i>

　　</div>

　　接下來就是CSS了，先看到a，首先當(dāng)然是先畫兩條垂直的矩形，做出暫停的icon，這里直接利用偽元素來畫，比較特別的是「高度為0」，因?yàn)樵谏厦嬗姓f過，為了要塑造一個「形狀的變換」，而不是「顏色的淡入淡出」，所以必須用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;

　　}

　　主體設(shè)定好之后，接著就要來設(shè)定hover和active的效果，這里就會用transform的scale和rotate，除了變形，仔細(xì)看一下，寬度和border寬度都改變了，加上位置的互相搭配，就可以很容易地做出兩個矩形在鼠標(biāo)移上去的時候變成三角形，點(diǎn)下去的時候變成正方形啰?。╯cale如果設(shè)定兩個值，分別就是寬與長的變形比例）

　　.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;

　　}

　　完成的效果就是長這樣。

　　接著是另外一個，原理基本上大同小異，然而不需要做形狀變換反而簡單許多，只需要調(diào)整角度和長寬就好啰！

　　.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風(fēng)格按鈕”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對怎么用純CSS Material Design風(fēng)格按鈕這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！