純CSS Material Design風格按鈕

lsxiao 發布于2019-08-29 18:43 / 1517人閱讀

摘要：以上就是純粹利用做出來的風格按鈕，相信熟練之后就可以做出更多不錯的應用啰

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

應用重點與原理

在這篇我純粹利用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元素來表示比較快。

接下來就是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風格按鈕，相信熟練之后就可以做出更多不錯的應用啰！

云服務器 GPU云服務器 material-design material-design-lite 純CSS html 按鈕css

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114523.html

純CSS Material Design風格按鈕

摘要：以上就是純粹利用做出來的風格按鈕，相信熟練之后就可以做出更多不錯的應用啰其實Material Design的扁平化icon按鈕，這類型的按鈕往往只利用幾何色塊的變化，就能抓住使用者的眼光，并且從幾何形狀中明白按鈕的含意，這也是Material Design非常強調的設計理念和精髓。showImg(https://segmentfault.com/img/bVbrRZq); 應用重點與...

YorkChen 2019-08-02 16:14 評論0 收藏0
轉：CSS :placeholder-shown偽類實現Material Design占位符交互效果

摘要：轉自偽類實現占位符交互效果一規范中占位符交互效果風格占位符交互效果官方示意見此頁面。我們可以采用絕對定位最后，對這個元素在輸入框時候，以及非顯示的時候進行重定位縮小并位移到上方四清除按鈕部分上是必要屬性，配合偽類實現我們的效果。轉自： https://github.com/yougola/bl... CSS :placeholder-shown偽類實現Material Design占...

gaara 2019-08-30 15:44 評論0 收藏0
‘純css實現Material Design中的水滴動畫按鈕’的js體驗優化

摘要：前言在上一篇，我們已經實現了用純實現水滴擴散動畫，但是有一些瑕疵，文章結尾處也提到過，一是頁面加載進來就會看到按鈕上的水滴動畫運動一次，二是點擊的時候不能根據鼠標的位置來擴散，今天我們來解決這個問題。前言在上一篇，我們已經實現了用純css實現水滴擴散動畫，但是有一些瑕疵，文章結尾處也提到過，一是頁面加載進來就會看到按鈕上的水滴動畫運動一次，二是點擊的時候不能根據鼠標的位置來擴散，今...

genefy 2019-08-29 17:02 評論0 收藏0
‘純css實現Material Design中的水滴動畫按鈕’的js體驗優化

摘要：前言在上一篇，我們已經實現了用純實現水滴擴散動畫，但是有一些瑕疵，文章結尾處也提到過，一是頁面加載進來就會看到按鈕上的水滴動畫運動一次，二是點擊的時候不能根據鼠標的位置來擴散，今天我們來解決這個問題。前言在上一篇，我們已經實現了用純css實現水滴擴散動畫，但是有一些瑕疵，文章結尾處也提到過，一是頁面加載進來就會看到按鈕上的水滴動畫運動一次，二是點擊的時候不能根據鼠標的位置來擴散，今...

xiaoqibTn 2019-08-23 12:28 評論0 收藏0
純css3漂亮的checkbox和radio美化效果插件Pretty.css插件

摘要：插件介紹是一款純漂亮的和美化效果。可以和多種字體圖標結合使用，對原生的和進行美化，還可以制作按鈕點擊時的動畫效果。支持的圖標庫有安裝可以使用，或來安裝。插件介紹 pretty.css是一款純css3漂亮的checkbox和radio美化效果。pretty.css可以和多種字體圖標結合使用，對原生的checkbox和radio進行美化，還可以制作按鈕點擊時的動畫效果。 showImg(...

eechen 2019-08-30 15:44 評論0 收藏0