振宇網頁設計公司
關於振宇 網站設計作品 網站排名 線上洽詢
用軟體輕鬆建立漂亮的網頁按鈕!
作者 Sunming   
2009/06/19

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


自訂按鈕

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

第一步:輸入文字

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

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

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

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

第二步:自訂背景

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

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

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

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

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

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

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

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

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

第三步:輸出按鈕

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

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

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


從範本自訂按鈕

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

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

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

最後更新 ( 2009/07/22 )
相關文章
更多網頁設計教學

網站設計 FAQ

網站架構圖及設計流程

More...

網頁設計包括哪些費用?

More...

網站建置需要多少時間?

More...
預算有限,想先體驗網路行銷的效果嗎?
More...
如何讓商機源源不絕而來?
More...
我需不需要自行架設主機呢?
More...
什麼是網域名稱(網址)?什麼是虛擬主機(網站空間)?
More...

RUS Website Design 瑞宇.台中網頁設計公司  Copyright © 2004 振宇網頁設計 All rights Reserved.  線上詢價
振宇首頁關於振宇設計作品線上洽詢常見問題新聞時事網頁設計教學友站連結網站地圖  免費交換連結
回到首頁 聯絡振宇