CSS按鈕模組-輕鬆套用五彩繽紛的特色按鈕

梅問題-CSS按鈕模組-輕鬆套用五彩繽紛的特色按鈕
  上星期曾分享過Bootstrap套件,讓程式設計師或視覺設計師,都能輕易上手的網頁模式,而Bootstrap這個網頁模組,使用上相當的簡單,只要依照它規範,指定CSS樣式類別,或是依照它的所指定的,安插html碼與js的控制碼,就能快速的產生各種的互動網頁效果,最近梅干在網路上,又發現另一套好用的模組,而這個網頁模組,主要是針對CSS按鈕部分,除了有各式各樣的按鈕外,還有五彩繽紛的色彩,讓你的網頁更有特色,同時這個CSS按鈕模組,也有提供一組的下拉選單效果可使用,只要在網頁插入相關的html碼就可以囉!現在就一塊來看看,這模組要如何使用吧!

Buttons:
套件名稱:Buttons
下載網址:http://alexwolfe.github.io/Buttons/

Buttons-下載與載入:
Step1
將Buttons模組下載回來,解壓縮後分別會看到,css、font、js三個資料夾。
梅問題-CSS按鈕模組-輕鬆套用五彩繽紛的特色按鈕
Step2
開啟網頁在<head>~</head>之間,將css與js載入至網頁。
梅問題-CSS按鈕模組-輕鬆套用五彩繽紛的特色按鈕
Buttons-套用樣式:
Step3
回到Buttons網頁中,每組按鈕下方的黑色塊,就是該組按鈕的示範語法。
梅問題-CSS按鈕模組-輕鬆套用五彩繽紛的特色按鈕
Step4
接著將它的css類別名稱,加到網頁的標籤語法中。
梅問題-CSS按鈕模組-輕鬆套用五彩繽紛的特色按鈕
Step5
鏘~鏘~立即套用。
梅問題-CSS按鈕模組-輕鬆套用五彩繽紛的特色按鈕
Step6
再來試試它的下拉選單,比Bootstrap來的更簡單,只要插入html的原始碼,就OK囉!
梅問題-CSS按鈕模組-輕鬆套用五彩繽紛的特色按鈕
Step7
馬上來預覽一下,哈~超EZ的就可產生下拉選單啦!
梅問題-CSS按鈕模組-輕鬆套用五彩繽紛的特色按鈕
  這一個CSS按鈕的模組還蠻方便的,且按鈕的配色還蠻陽光的,同時按鈕的變化也蠻多樣化,從方角到圓角甚至到圓形都有,更重要的是完全不用任何圖片,更加速網頁的載入速度,其實像Buttons的CSS模組,製作上並不困難,因此有興趣的視覺設計師們,平常也可自行定義屬於自已的CSS樣式模組,以便於之後專案的使用喔!

相關文章

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

CSS3動畫hover套件,各種常用的互動特效直接套用

CSS3動畫hover套件,各種常用的互動特效直接套用





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 2 梅留言

  • 第2梅
    zion 說道:

    我下載左個模組 我下載左話係個不明的檔案類型 求解答 Thank you SO much!!!!

  • 第1梅
    Marco 說道:

    好實用呀~