「Call-to-Action Button Generator」是一個我蠻喜歡的CSS按鈕產生器，除了基本的顏色調配外，也可以調整圓角、陰影，或者在按鈕中加入一個小圖示，最後可產生CSS與HTML的語法，如果不想用語法的人，亦提供了PNG的按鈕圖片可以下載，像上面這個大大的紅色按鈕，就是用這個產生器製作的，廢話不多說，直接進入教學吧。

網址：Call-to-Action Button Generator

【使用教學】

整個操作介面算是很淺顯易懂，左邊是各項參數的調整區，而右邊則是即時預覽的區域以及下載程式碼或圖片的地方

1. SELECT BASE COLOR：選擇基本的顏色，可以直接輸入色碼，或點選顏色盤，在這個步驟中，預設是會有漸層色，但這是可以修改的
2. BUTTON TEXT：設定按鈕的文字、顏色、字型以及大小，另外，目前輸入中文是可以預覽的到，如果你是用CSS的呈現效果，那麼這是沒有問題的，但如果你是想要下載PNG檔，那麼中文字型會變亂碼喔，這個要特別注意一下

1. SIZE, BORDER & COLOR DETAILS：上下左右的空間、顏色的進階設定、按鈕的圓角、邊框及其顏色都可以在這裡調整，例如上面有到按鈕是有漸層色的，如果要變更，則可以利用「Background top color」、「Background bottom color」來微調
2. ICON：可以在按鈕的前面、或後面加上一個小圖示，並調整位置，如果不想要有圖示的話，點擊在「ICON」右邊的「remove icon」即可

關於「ICON」這個功能要特別說明一下，如果你覺得預設的圖示並不是你想要的，那麼可以在搜尋框中輸入關鍵字來搜尋，它整合了「IconFinder」這個有名的圖示網站，最後從列表中選擇想要的圖示就可完成變更圖示的動作囉

1. TEXT SHADOW：設定按鈕文字的位置、顏色、陰影等等
2. BOX SHADOW：設定整個按鈕的位置、顏色、陰影

調整完畢後，請點擊右邊的「Dwonload as PNG image」來下載PNG檔，或者點擊「Get CSS code」來取得CSS的語法，若你是採用CSS的語法，那麼在「HTML code」中也有說明該如何來使用這個CSS按鈕，是不是很貼心呢？對了，別以為這個CSS的語法只是單純的按鈕喔，滑鼠移到按鈕上一樣會有不同的顏色特效

您可能也喜歡：
Mobilefish QR Code Generator § 免費、超有彈性的QR Code產生器	[教學] 如何利用Inkscape將SVG檔轉存成具透明背景的PNG檔	UPUP Haniboi 文字舉牌小人偶產生器可愛上場，傳達心聲、表達心意的好幫手	GlowTxt 可愛風格的萌系動態文字產生器	超可愛！迪士尼的怪獸大學Monsters University學生證產生器
无觅