這篇文章主要介紹“如何用CSS實現(xiàn)Material Design風格按鈕”，在日常操作中，相信很多人在如何用CSS實現(xiàn)Material Design風格按鈕問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何用CSS實現(xiàn)Material Design風格按鈕”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習吧！
創(chuàng)新互聯(lián)公司從2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都網(wǎng)站設(shè)計、成都做網(wǎng)站網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元易縣做網(wǎng)站,已為上家服務(wù),為易縣各地企業(yè)和個人服務(wù),聯(lián)系電話:18982081108其實Material Design的扁平化icon按鈕，這類型的按鈕往往只利用幾何色塊的變化，就能抓住使用者的眼光，并且從幾何形狀中明白按鈕的含意，這也是Material Design非常強調(diào)的設(shè)計理念和精髓。
如果你依然在編程的世界里迷茫，不知道自己的未來規(guī)劃，可以加入web前端學(xué)習交流秋秋圈：767273102 里面可以與大神一起交流并走出迷茫。新手可免費領(lǐng)取學(xué)習資料，看看前輩們是如何在編程的世界里傲然前行不停更新最新的教程和學(xué)習方法（詳細的前端項目實戰(zhàn)教學(xué)視頻），有想學(xué)習web前端的，或是轉(zhuǎn)行，或是大學(xué)生，還有工作中想提升自己能力的，正在學(xué)習的小伙伴歡迎加入
在這篇我純粹利用CSS，就做出了Material Design風格的按鈕，其實沒有很難，比較需要知道的重點如下：
偽元素before和after的應(yīng)用
偽元素在里頭扮演相當重要的角色，利用偽元素我們可以產(chǎn)生兩個不在HTML里頭的類div，可以大幅降低代碼的復(fù)雜程度。
div的自身寬度與邊框
由于我們要進行三角形與矩形之間的形變，雖然三角形可由邊框產(chǎn)生，但卻無法做出漂亮的形變效果（用背景色的話就會有淡入淡出的現(xiàn)象），所以必須要用邊框?qū)挾群途匦未笮∪ゴ钆?，當邊框變細的時候，矩形變大，如此一來就可以做出三角形與矩形互相變換的效果啰，下圖的紅色是純粹用顏色變換，藍色則是用邊框?qū)挾扰cdiv寬度變換，效果應(yīng)該很明顯吧！
transform的應(yīng)用
CSS里所有的形變都是藉由transform來完成（必要時請加各個瀏覽器的前墜字），示例里頭會用到scale與rotate這兩個變形屬性。
了解原理之后，先來看一下HTML代碼，代碼里面有兩個主要的div分別是a和b，a的話是利用偽元素來進行變換，b的內(nèi)容還有三個小i分別是b1、b2和b3（都會宣告為block屬性），因為大于兩個就無法純粹使用偽元素，所以直接用三個block元素來表示比較快。
接下來就是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;
}主體設(shè)定好之后，接著就要來設(shè)定hover和active的效果，這里就會用transform的scale和rotate，除了變形，仔細看一下，寬度和border寬度都改變了，加上位置的互相搭配，就可以很容易地做出兩個矩形在鼠標移上去的時候變成三角形，點下去的時候變成正方形啰?。╯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風格按鈕，相信熟練之后就可以做出更多不錯的應(yīng)用！
到此，關(guān)于“如何用CSS實現(xiàn)Material Design風格按鈕”的學(xué)習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習，快去試試吧！若想繼續(xù)學(xué)習更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
當前標題：如何用CSS實現(xiàn)MaterialDesign風格按鈕-創(chuàng)新互聯(lián)
文章起源：http://weahome.cn/article/cdecej.html
