瀏覽人數3565 | 字級:
輕鬆建立漂亮的網頁按鈕!
Da Button Factory是一個線上製作網頁按鈕的網站,你可以自訂按鈕,或是從網站提供的範例來進行編輯。

【文/瓜南】

DA BUTTON FACTORY – 輕鬆建立漂亮的網頁按鈕!

本文章發佈於免費資源網路社群,轉貼時請註明頁面網址並保留本訊息,謝謝。

DaButtonFactory.png

Da Button Factory是一個線上製作網頁按鈕的網站,你可以自訂按鈕,或是從網站提供的範例來進行編輯。雖然 Da Button Factory 提供的樣式不是很多,但是藉由形狀、顏色等等不同的搭配,還是可以做出非常漂亮的按鈕,幾乎不需要任何美工的基礎!製作出來的按鈕,不但可以直接將圖片儲存下來,也可以直接輸出 CSS 原始碼,非常方便。


自訂按鈕

打開 Da Button Factory 網頁,就可以開始自訂按鈕,完全不需要下載任何程式。

DaButtonFactory-01.png

第一步:輸入文字

首先進行文字的輸入,在』Text』旁邊的欲使用在按鈕上的文字,輸入後效果會立刻出現在預覽,同時支援英文與中文。

DaButtonFactory-02.png

然後點選』Font』右邊的三角符號,從下拉選單中選擇喜歡的字型。另外要注意一點,如果輸入的是中文,請一定要選擇』Zenhei』字型,否則無法顯示。

DaButtonFactory-03.png

DaButtonFactory-04.png

接著對文字的其他效果進行設定。』Bold?』選擇文字是否使用粗體,』Italic?』選擇文字是否使用斜體。透過』Size』右邊的』+』"-』 可以放大或者縮小文字,也可以直接在輸入框中直接輸入你想要的大小。點選』Color』,會出現如圖的顏色選擇框,可以從調色盤選擇顏色,也可以直接輸入顏色代碼。

『Text shadow』是文字陰影,如果你不想顯示陰影,可以不勾選這一項,』Distance』用於調整陰影與文字的距離,』Color』調整陰影的顏色,和調整文字顏色的方法相同。

DaButtonFactory-05.png

第二步:自訂背景

首先點選』Button type』,設定背景形狀,有三種樣式:矩形(rectangular box)、圓角矩形(rounded box)和圓形(round box),其中圓形並不是指按鈕式圓形,而是左右兩端呈半圓形。

如果選擇了圓角矩形(rounded box),則會有圓角半徑(Comers radius)的設定,輸入數值決定圓角的大小。數值越小,越接近矩形(rectangular box);相反,數值越大,越接近圓形(round box)。

DaButtonFactory-06.png

然後進行背景顏色的設定。背景顏色有四種模式:單色(unicolor)、雙色(two colors)、單向漸變(gradient)以及雙向漸變(pyramid)。

單色(unicolor):背景只有一種顏色,只要點選』Color』,選擇需要的背景顏色就可以了。還可以勾選』Bubble effect』增加氣泡效果

DaButtonFactory-07.png

雙色(two colors):背景是兩種顏色各佔背景的50%大小,分別選取頂部顏色(Top color)和底部顏色(Bottom color),點選』swap』可以快速調換頂部和底部的顏色,不必重新選取。

DaButtonFactory-08.png

單向漸變(gradient):頂部向底部漸變。同樣需要選取頂部和底部顏色。

DaButtonFactory-09.png

雙向漸變(pyramid):中間向兩邊顏色漸變,需要選取中間和邊緣的顏色,同樣點選』swap』可以快速調換中間和邊緣的顏色。

DaButtonFactory-10.png

之後可以對其他屬性進行設定,可以選擇按鈕是否有邊框(Border?),並設定邊框的大小和顏色;是否有陰影(Shadow?),可以設定陰影的大小、顏色、以及方向,這兩項設定與上述設定方法基本上相同。

最後還可以設定按鈕的大小(Size)。按鈕大小設定有兩種模式fixed和variable,兩種的設定方法相同,都是分別對水平/寬度和垂直/高度的數值進行修正。

DaButtonFactory-11.png

第三步:輸出按鈕

輸出按鈕有兩種模式:圖片和CSS背景。

圖片輸出:選擇輸出類型(Output type)下的選項為圖片(Image),在圖片格式(Image format)右邊的下拉選單選擇需要的圖片格式,然後點選』download』,就可以儲存按鈕。

DaButtonFactory-12.png

製作出來的範例如下:

DaButtonFactory-13.png

CSS背景輸出:選擇輸出類型(Output type)下的選單為CSS背景(CSS background),設定圖片格式,選定好以後會出現一段原始碼,你可以把原始碼複製到你的網頁中使用。

DaButtonFactory-14.png

從範本自訂按鈕

如果你覺得這樣一步一步設定有點繁瑣?那麼可以試試從範本直接編輯,點』Examples』進入範例頁面。

DaButtonFactory-15.png

找到喜歡的樣式,點選』edit this button』。

DaButtonFactory-16.png

之後會進入編輯頁面,只要把文字換成自己的文字,稍做微調就可以啦!輸出和前面介紹的方法一樣。

DaButtonFactory-17.png

做出來的範例如下:

DaButtonFactory-18.png

【網站網址】Da Button Factory

【更多免費資源請上《免費資源網路社群》】


相關新聞:
新聞臉譜 (投下你對這則新聞的感覺)
回 應 文 章
0 篇回應文章 我要回應

社群回應載入中

作者登入 線上投稿
最新活動看板
 
  • 好友分享
  • 聯合新聞網粉絲團
訂閱電子報
黑麵的攝影之路
udn資訊科技電子報
udn 3C消費資訊報
udn 手機充電報
電玩優報
NOVA情報誌
數位之牆電子報
數位出版電子報
SOGI手機快報
旗標電腦知識報