2014年10月7日

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

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 相關技巧:

8 則留言:

  1. 終於知道wayne文章裡常看見的美麗按鈕怎麼做出來的了! 先收著以備不時之需,謝謝^^

    回覆刪除
  2. 親愛的板大您好,想請教您一個問題
    google blogger 本身已經有超連結的CSS顏色
    造成按鈕內的文字變色
    請問是否有解決的辦法
    謝謝~

    回覆刪除
    回覆
    1. 後台範本 → 自訂 → 進階 → 連結,這裡就可以修改囉

      刪除
    2. 不好意思..
      好像可以調整連結的顏色,
      但好像會影響到整個網站的連結,
      是否可以真對按鈕的CSS作處理.

      刪除
    3. 每個人的範本內容都不一樣,要處理的 CSS 狀況也不同,所以下面留言注意事項註明了不方便個別回覆 CSS 相關問題。

      如果本文產生的按鈕 CSS 語法效果,會被範本的其他設定覆蓋掉的話,那麼你需要研究一下「CSS 優先順序」這個主題,可以 google 相關文章,或參考這篇 http://markxii.com/css-priority-rules/,最簡單的方法就是使用 !important,不過當 CSS 能力提升後,就要學會利用 CSS 優先順序來設定。

      刪除
    4. 太感謝 Wayne Fu大大 成功了~

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。