純CSS Material Design風格按鈕
其實Material Design的扁平化icon按鈕,這型別的按鈕往往只利用幾何色塊的變化,就能抓住使用者的眼光,並且從幾何形狀中明白按鈕的含意,這也是Material Design非常強調的設計理念和精髓。
如果你依然在程式設計的世界裡迷茫,不知道自己的未來規劃,可以加入web前端學習交流秋秋圈:767273102 裡面可以與大神一起交流並走出迷茫。新手可免費領取學習資料,看看前輩們是如何在程式設計的世界裡傲然前行不停更新最新的教程和學習方法(詳細的前端專案實戰教學視訊),有想學習web前端的,或是轉行,或是大學生,還有工作中想提升自己能力的,正在學習的小夥伴歡迎加入
應用重點與原理
在這篇我純粹利用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風格按鈕,相信熟練之後就可以做出更多不錯的應用!
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69901074/viewspace-2642847/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 用CSS Houdini實現一個Material風格的按鈕CSS
- Material Design Lite元件之按鈕Material Design元件
- SVG 建立 Material Design 波紋效果按鈕SVGMaterial Design
- SVG建立Material Design波紋效果按鈕SVGMaterial Design
- 仿switch風格滑動按鈕
- Material Design風格的APP介面設計欣賞Material DesignAPP
- 七張動圖一覽谷歌Material Design介面風格谷歌Material Design
- Android Material Design控制元件使用(二)——FloatButton TextInputEditText TextInputLayout 按鈕AndroidMaterial Design控制元件
- 使用純 CSS 實現仿 Material Design 的 input 過渡效果CSSMaterial Design
- C# winForm 建立水晶風格的按鈕C#ORM
- flutter的進階之路之Material Design與IOS風格元件FlutterMaterial DesigniOS元件
- Android-Material Design風格MVP模式的新聞AppAndroidMaterial DesignMVP模式APP
- 從“按鈕”看設計風格的演變
- 純CSS3發光按鈕動畫 非常絢麗CSSS3動畫
- Material Design:為什麼懸浮響應按鈕是糟糕的 UX 設計Material DesignUX
- 建立SWING風格的按鈕控制元件 (轉)控制元件
- div按鈕CSSCSS
- 如何給 Chrome 開發者工具設定 Material Design 風格的主題外觀ChromeMaterial Design
- Material DesignMaterial Design
- Material Design 風格的 Excell-like 網頁端電子表格處理系統Material DesignExcel網頁
- CSS按鈕垂直水平居中CSS
- css立體按鈕效果CSS
- CSS 叉號按鈕效果CSS
- Material Design AnimationMaterial Design
- Material Design時代Material Design
- CSS開關按鈕三例CSS
- CSS3動畫按鈕效果CSSS3動畫
- Material Design實戰Material Design
- 安卓Material Design(2)安卓Material Design
- 安卓Material Design(3)安卓Material Design
- 安卓Material Design(5)安卓Material Design
- CSS實現帶箭頭按鈕CSS
- css實現圓角按鈕效果CSS
- css叉號關閉按鈕效果CSS
- 怎樣用純HTML和CSS更改預設的上傳檔案按鈕樣式HTMLCSS
- 純CSS3實現超炫酷的3D開關切換按鈕CSSS33D
- Angular Material 攻略 03 angular Material Design 安裝AngularMaterial Design
- Android之Material DesignAndroidMaterial Design