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

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

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

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

前往 Button X

一、官方網站


名稱：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 相關技巧：