分享到 Facebook 分享到 Google+
▌訂閱、追蹤本站最新文章

Call-to-Action Button Generator - CSS 按鈕產生器

初學網頁製作的人來說,當需要對「按鈕」元件進行美工時,若能參考別人寫好的 CSS Code 是一個事半功倍的好方法。Call-to-Action Button Generator 是一個可即時預覽的 CSS 按鈕線上產生器,不但提供按鈕顏色、文字、陰影、ICON 等屬性自訂外,還可自動產生所需的 CSS Code 與 PNG 圖檔,讓使用者方便影用到網頁的任意處,相當方便。

【Call-to-Action Button Generator 網站資訊】
網站語言:英文
服務性質:免費
如何使用Call-to-Action Button Generator 產生按鈕?

1.使用瀏覽器進入 Call-to-Action Button Generator  網站後,左側邊是各項參數的調整區,而在其旁的則是提供即時預覽與取得 CSS Code 與圖片的區域。
ContentPhoto2247

2.在左側欄的屬性選項 SELECT BASE COLOR,可選擇按鈕的顏色,預設是會有漸層色,可自行調整。
ContentPhoto2247

3.BUTTON TEXT,可設定按鈕的文字、顏色、字型與大小。
ContentPhoto2247

4.SIZE, BORDER & COLOR DETAILS,則可調整圓角角度、邊框及其顏色,若想取消漸層色,則可以利用 Background top color、Background bottom color 這兩個屬性來調整。
ContentPhoto2247

5.ICON,則可在按鈕的前面或後面加入圖示,並可調整其位置,需要更多的圖示可在搜尋框輸入關鍵字來搜尋,亦可點擊[remove icon]來移除圖示。
ContentPhoto2247

6.TEXT SHADOW 與 BOX SHADOW,則是用來調整按鈕文字與按鈕的位置、顏色、陰影。
ContentPhoto2247

7.調整好之後,則可點擊[Get CSS code] 或 [Download as PNG image]來取得相對應的 CSS 與 PNG 圖檔。
ContentPhoto2247

延伸閱讀
§歡迎加入臉書粉絲團 §歡迎加入Google+社交圈
目前有0則留言
*暱稱
*電子郵件 (不會公佈)
網址
(1.請輸入完整網址含http:// 2.將會在暱稱後使用該連結)
*留言內容