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>

 

隨機文章

 

本站全部文章分類

PC 個人電腦、Windows 作業系統
Chrome,Firefox,Opera,IE Email 郵件收發、收信軟體 MSN、Yahoo! 即時通訊
Windows 系統設定、功能調整 下載/上傳工具、P2P、FTP 好玩遊戲、休閒益智
影視編輯、轉檔、影音播放 文書編輯、PDF、Office、字典 桌面美化、介面最佳化
檔案管理、壓縮、備份還原 燒錄軟體、光碟燒錄 看圖軟體、繪圖、相片處理
系統維護、設定工具 網路工具、遠端遙控 防毒軟體、防火牆、病毒檢測
音樂編輯、轉檔、播放軟體 好用軟體-未分類
iPad, iPhone 手機、平板電腦
iOS 好玩遊戲、休閒益智 iOS 影視播放、影音編輯轉檔 iOS 拍照攝影特效、繪圖工具
iOS 文書處理、辦公室應用 iOS 桌布美化、系統增強工具 iOS 系統設定、功能調整
iOS 網路瀏覽、其他工具 iOS 美食旅遊、地圖服務 iOS 購物理財、生活應用
iOS 通訊、聊天、社交服務 iOS 音樂播放、音樂編輯轉檔 iPhone、iPad -未分類
Android 手機、平板電腦
  Android 好玩遊戲、休閒益智 Android 影音播放、影視編輯 Android 拍照攝影特效、繪圖
Android 文書處理、編輯應用 Android 桌布美化、系統增強 Android 系統設定、功能調整
Android 網路瀏覽、其他工具 Android 美食旅遊、地圖服務 Android 購物理財、生活應用
Android 通訊、聊天社交服務 Android 音樂播放、編輯轉檔 Android 未分類
免費空間、線上工具、社交網站
Facebook 臉書 Google Plus, Google+ Google 與其他 Google 應用
Plurk 噗浪 Twitter 微網誌 YouTube
網路空間、服務與實用工具
網站架設、網頁編輯、伺服器
Blog 部落格 WordPress 網站架設 網頁編修、網站架設
虛擬主機, VPS, 伺服器租用
硬體3C 其他、不分類
Apple 蘋果電腦 Mac OS X 作業系統
Mac OS X 系統設定、調整 Mac 下載工具、P2P、FTP Mac 好玩遊戲、休閒益智
Mac 影視編輯、轉檔播放軟體 Mac 文書編輯、PDF、字典 Mac 桌面美化、介面最佳化
Mac 檔案管理、壓縮備份還原 Mac 燒錄軟體、光碟燒錄 Mac 看圖軟體、轉檔繪圖美化
Mac 系統維護、設定工具 Mac 網路工具、郵件即時通訊 Mac 防毒、防火牆、病毒檢測
Mac 音樂編輯、轉檔播放軟體 Mac蘋果電腦-未分類