1. 程式人生 > >純CSS Material Design風格按鈕

純CSS Material Design風格按鈕

mat height hover 屬性。 ive 現象 整理 tran 內容

其實Material Design的扁平化icon按鈕,這類型的按鈕往往只利用幾何色塊的變化,就能抓住使用者的眼光,並且從幾何形狀中明白按鈕的含意,這也是Material Design非常強調的設計理念和精髓。

技術分享圖片

這裏推薦一下我的前端學習交流扣qun:731771211 ,裏面都是學習前端的,如果你想制作酷炫的網頁,想學習編程。自己整理了一份2019最全面前端學習資料,從最基礎的HTML+CSS+JS【炫酷特效,遊戲,插件封裝,設計模式】到移動端HTML5的項目實戰的學習資料都有整理,送給每一位前端小夥伴,每天分享技術

點擊:加入

應用重點與原理

在這篇我純粹利用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風格按鈕