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

【文/瓜南】

分享本文