CSS按鈕產生器(CSS Button Designer)

作者:

如果你想在自己的部落格或網頁放些與眾不同的按鈕,取代那種灰底黑字的制式樣式,除了可以找人畫些可愛的小圖示,也可以用CSS控制碼來做唷!

以下介紹一個很簡單的CSS按鈕產生器,它可以讓我們自行輸入按鈕上的文字(支援中文字體)、設定文字顏色、背景色、按鈕大小與長寬尺寸…,並可自行挑選外框樣式與各種滑鼠特效…等,讓不懂CSS的人也可以快速做好亮眼又特別的網頁按鈕。

記得很久之前「CSS Button Designer」這東西還是個小軟體,沒想到現在已經有「網路版」的了,整體用起來都還滿順的,對於不懂CSS或懶惰的人來說,還算是個滿不錯的實用工具。

 

  • 網站名稱:CSS Button Designer
  • 網站網址:按這裡

使用方法:

第1步  開啟CSS Button Designer網頁後,「Designer」頁面可以讓我們設定按鈕的文字內容、字體大小、顏色、背景色、背景圖與按鈕長寬、外框樣式與顏色...等各項屬性,設定好之後再按一下〔Make Changes〕便可在「TEST AREA」區塊即時看到按鈕的最新樣式。

01-CSS按鈕產生器(CSS Button Designer)

 

第2步  切換到「Mouseover」頁面,我們可以在這頁面中設定「當滑鼠移動到按鈕上方時」的變化,可以改變文字顏色、背景色或外框樣式...等等,一樣是按一下〔Make Changes〕即可看到修改好的樣子。

02-CSS按鈕產生器(CSS Button Designer)

 

第3步  全部都設定好之後,我們可以切換到「Code」頁面,將「Head code」方框中的程式碼貼上到你的網頁中的<head>與</head>之間,「Button code」方框裡的程式碼則貼在你要顯示按鈕的位置,並依照你的網頁內容設定該按鈕的功能與其他屬性。

03-CSS按鈕產生器(CSS Button Designer)

 

第4步  另外「Samples」頁面中會列出幾個預先設計好的按鈕樣式,我們可以直接點選頁面中的按鈕來做修改,改好之後馬上就可以用囉!  

04-CSS按鈕產生器(CSS Button Designer)

 

延伸閱讀:

  1. 文字樣式「CSS代碼產生器」
  2. 所見即所得的「WordPress Theme」產生器!
  3. 網站、部落格「樹狀分類產生器」
  4. Toolbar Buttons自訂按鈕!把Firefox深藏不露的功能拉出來,作成按鈕!
  5. 免裝軟體,「新同文堂」網頁繁、簡中文轉換按鈕!(書籤小工具)


无觅相关文章插件,快速提升流量

非經授權,請勿全文轉載,本文網址:
→ 免費訂閱最新文章:  (如何訂閱?)
作者: | 發佈日期:
注意事項:本站所介紹之軟體、設定或網站服務,經實際安裝測試並通過防毒軟體掃毒。但因為不同電腦環境與軟體設定可能都各有差異,建議您僅在非工作用的電腦安裝、測試,避免因為不可預知的錯誤、當機或軟硬體衝突,影響您的工作或電腦運作。另外,在進行任何重要的操作與設定之前,記得先行備份電腦中的重要資料,避免因為未依指示的不當操作或其他疏失造成資料毀損。當您依照本文所提供之訊息執行各種操作,表示您已閱讀此注意事項並同意自行承擔可能之風險與責任。

 

歡迎留下你的想法或意見...

  1. web developer. R 說道:

    謝謝分享, effect 都很多…

    就像我一向用的這個

    http://css-button-generator.com/

  2. chyuanyiin 說道:

    請問如何將完成的按鈕加入超連結zzz

    謝謝

發表迴響

你的電子郵件位址並不會被公開。

你可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>