Facebook加入
LINE加入
2021/12/25
說到網頁中最常用到的元件，想必一定是大家都知道的「按鈕」，網頁中無時無刻不充滿著按鈕這個元素，但是如何設計出一個好的按鈕就是一門深奧的學問了，像站長自己本身其實沒有什麼藝術和美工的基礎，所以常常做不出來非常滿意的按鈕設計，這時除了可以參考別人的按鈕設計之外，還可以依靠今天所要介紹的這種線上按鈕製作服務「Da Button Factory」來提高自己的設計時的方便性。
Da Button Factory 是一個線上按鈕製作服務，可以讓使用者設計出自己想要得按鈕樣式，藉由字型、形狀、顏色等不同的搭配，使用者可以很發揮創意製作出許多漂亮的按鈕。對於像站長這種不擅長設計的人來說可以非常有用的利器，除了可以即時預覽之外，還可以直接將設計完成的按鈕以圖片的方式保存下來，而進階一點的站長也可以選擇直接輸出 HTML 和 CSS 原始碼，非常的方便。想要自己製作按鈕的讀者請一定要來看看。
網站鏈結：https://dabuttonfactory.com/
使用教學
STEP 1
進到 Da Button Factory 後，就可以直接開始設計按鈕，首先在「TEXT」欄位中輸入想在按鈕上顯示的文字，並且支援英文與中文。
STEP 2
然後在「Font」的選項中，可以選擇喜歡的字型及字體的粗細、斜體、大小還有顏色。而有一點要注意，如果輸入的文字是中文，請記得要選擇像是 Zenhei 這種有標註「CJK support」的字型，否則可能會無法正常顯示。
STEP 3
下方的「Text Shadow」則是文字的陰影，如果不希望文字顯示陰影，可以取消這一選項，Distance to Text 是調整陰影與文字的間距，Color 可以調整陰影的顏色。
STEP 4
左側最下方的「SIZE」選項，這個對於擅長 CSS 的人來說可能會比較了解，可以調整按鈕與文字之間的距離，至於有沒有這個需求還是要看每個人的設計方針來決定。
STEP 5
右側選單的「Style」可以設定按鈕的背景形狀，並能調整數值來決定圓角的幅度。「Background」則能進行背景顏色的設定，目前有四種模式，單色（Unicolor）、雙色（Two Colors）、單向漸層（Gradient）以及雙向漸層（Pyramid）。
最後使用者也可以決定按鈕是否需要有邊框「Border」與陰影「Shadow」，並且可以設定兩者的大小、顏色以及陰影的方向，可以說是十分的豐富。
STEP 6
全部完成後，就可以將按鈕給輸出了，而輸出按鈕有兩種方式，分別是「圖片」和「程式碼」。先以圖片輸出來說，使用者需要在網頁中間的下拉選單中來選擇想要輸出的圖片格式，然後點選「Download」，就可以將按鈕儲存成圖片了。
STEP 7
比較進階一點的站長也可以選擇將按鈕輸出成程式碼，只需要點擊左邊的「Embed」便可以將出現的原程式碼複製到自己的網站中使用，同時編輯也可以更加地方便。
STEP 8
文章的最後，Da Button Factory 也提供了不少的範本可以給使用者直接編輯，點選右上角的「Examples」就可以直接取用，省去了一步步進行設定的繁瑣過程。
熱門推薦
留言回覆
