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