萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> css按鈕自適應的技巧

css按鈕自適應的技巧

歡迎大家在這裡學習css按鈕自適應這裡是我們給大家整理出來的精彩內容。我相信,這些問題也肯定是很多朋友在關心的,所以我就給大家談談這個!

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<style type="text/css"> 
.btn a{text-decoration:none;} 
.btn{display: inline-block; background: url(s_btn.png) no-repeat 0 0; height: 22px; line-height: 22px; color: #666; vertical-align:top;} 
.btn i{display:block;font-style: normal; font-size: 12px; padding: 0 10px; background:url(s_btn.png) no-repeat right -22px; } 
.btn:hover{text-decoration: none;color:#4c8136;background-position: 0 -44px;} 
.btn:hover i{background-position: right -66px;} 
.btn:active{background-position: 0 -88px;} 
.btn:active i{background-position: right -110px;} 
.btn_disabled, .btn_disabled:hover{background: url(../img/s_btn.png) no-repeat 0 -132px;cursor: default;} 
.btn_disabled i, .btn_disabled:hover i, .s_btn_disabled:active i{background-position: right -154px;color:#999;} 
</style> 
</head> 
<body> 
<a href="#" class="btn"> <i>這是按鈕</i> </a> 
<a href="#" class="btn"> <i>按鈕</i> </a> 
</body> 
</html>

好了,css按鈕自適應內容就給大家介紹到這裡了。希望大家繼續關注我們的網站!

相關推薦:

CSS每行顯示4個圖片樣式介紹 

CSS屬性縮寫全寫介紹 

copyright © 萬盛學電腦網 all rights reserved