首頁 > 開發者 > JavaScript
css實現的點擊具有立體背景變化效果的按鈕，css實現背景按鈕
css實現的點擊具有立體背景變化效果的按鈕:
一般來講原生態的東西都比較粗放，網頁中的按鈕也是如此，下面就介紹一下美化按鈕的方法，就是給連結設定一個背景圖片，並且設定連結預設狀態下和按下狀態的背景圖片，這樣就實現我們想要的效果。
代碼如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>螞蟻部落</title><style type="text/css">.clear{ overflow: hidden; width: 100%;}a.button{ background: transparent url('mytest/demo/bg_button_a.gif') no-repeat scroll top right; color:#444; display:block; float:left; font:normal 12px arial, sans-serif; height:24px; margin-right:6px; padding-right:18px; /* sliding doors padding */ text-decoration:none;}a.button span{ background:transparent url('mytest/demo/bg_button_span.gif') no-repeat; display:block; line-height:14px; padding:5px 0 5px 18px;}a.button:active{ background-position: bottom right; color:#000; outline:none;}a.button:active span { background-position:bottom left; padding:6px 0 4px 18px; }</style></head><body><a class="button" href="javascript:void(0);"><span>按鈕</span></a></body></html>
以上代碼實現了我們的要求，代碼比較簡單這裡就不多介紹了，可以參閱相關閱讀。
相關閱讀:
1.:active可以參閱CSS中a:link、a:visited、a:hover、a:active的用法一章節。
2.background-position可以參閱CSS的background-position定位詳解一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=12737
更多內容可以參閱:http://www.softwhy.com/divcss/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
