2014年10月1日 星期三

最佳 CSS 3D 按鈕產生器__Button X 操作心得

最佳 CSS 3D 按鈕產生器__Button X 操作心得

Wayne Fu 0 A+
使用 CSS 語法產生的按鈕,要做的好看不容易;然而圖片式的按鈕雖然畫面呈現較佳,卻需要花費 http 請求時間,也就是會影響網頁載入速度。如果可以的話,使用 CSS 按鈕會是最佳選擇。

網路上有許多線上 CSS 按鈕產生器,可以讓我們輕易取得不少漂亮的按鈕。而本篇要介紹的 CSS 按鈕產生器──Button X,是 WFU 認為最棒的一個,滿符合該網站對自己的期許(Best CSS Button Generator)。他們提供了許多精緻的預設按鈕,質量比其他網站的 CSS 按鈕好很多。

按理說這類的線上服務其實不必特別介紹操作方式,通常滑鼠拉一拉就能產生 CSS 語法。不過本篇的線上服務,除了英文介面外,操作過程碰到些許小小複雜,因此特別整理一下使用心得,讓讀者能順利上手。下面這顆按鈕就是利用這個線上服務所製作出來的效果──




一、官方網站



名稱:Button X ── Best CSS Button Generator
網址:http://www.bestcssbuttongenerator.com/



下面是網站畫面,及大致的操作區域──





二、基本操作


1. 更改 CSS 效果

要調整 CSS 效果的操作很簡單,從上面的圖可看到,右半邊所有紅框區塊,都有橫桿可以用滑鼠拉動,來調整文字大小、按鈕尺寸等等效果。我們在右半邊所有的操作,左半邊中央的那顆按鈕,就能即時顯現調整後的效果,所以我們可以在這裡調整各種細節,直到滿意的結果為止。


2. 挑選其他按鈕

按下左上角的「Show Button Library」後,就能挑選系統設定好的按鈕範本,很多都滿不錯的。下面為按鈕範本的示意圖,我們以紅色箭頭的這顆按鈕來舉例:




3. 複製程式碼

假設我們挑選了上圖的深藍色漸層 3D 按鈕,並且也調整了所有我們需要的 CSS 效果,接下來按照下圖步驟 1~4 的步驟即可複製程式碼:



  • 對著正中央的按鈕按下去
  • 右半邊會轉而出現安裝程式碼
  • 最上面一行為按鈕的 HTML 碼,放置在網頁任何想要出現的位置即可。
  • 其餘的內容皆為 CSS 樣式程式碼,可放在範本之中 </head> 之前的位置,並且 CSS 程式碼的前後要用 style 標籤包住,就像下面這樣:

<style>
CSS 程式碼
</style>



三、自訂按鈕範本細節


這個 CSS 按鈕線上服務,比較令人困惑的操作,主要在於選擇顏色的部分。有的按鈕雖然美觀,可是與我們網站的色系不搭,那麼要如何置換成其他顏色呢?可以有兩種方式:

1. 自訂顏色



在上圖紅框的這一排七個正方形按鈕,各自代表七個部分的顏色,滑鼠移上去就可顯示代表的意思,例如藍色箭頭的那顆白色按鈕,會顯示英文提示 "Font Color",代表文字顏色為白色。

紅框中的任一按鈕,按下後都會出現調色盤,可調整該顏色為自訂的顏色,或是乾脆也可在最下方直接填入色碼


2. 自訂顏色

如果跟 WFU 一樣沒什麼美術天分,也許直接套用系統提供的整組配色,是最省事的方式。



接續「1. 自訂顏色」,出現上圖右下角的區塊後,有捲軸可以上下捲動,來挑選系統提供的配色組合。圖中的範例是點選了紅框中的這組配色,可看到上方按鈕的示意圖立刻改變了配色。

必須注意的是,上圖紅框中的七個正方形按鈕,按了同一組的任一個按鈕都是同樣的結果,只會改變按鈕的示意圖,而無法調整個別顏色。

當初就是在這一點鬼打牆很久,按來按去不知如何細調顏色。選了系統提供的配色組合後,必須回到「1. 自訂顏色」的那一排按鈕,才能夠細調顏色。


好了,操作需要注意的地方大致如以上所述,希望大家都能製作出讓網頁加分、令人滿意的 3D 按鈕效果。


更多 CSS 相關技巧:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP