The principle of the button adaptation is to use a label and I tag each one of the background combination into a button to achieve adaptive, the implementation of CSS style and HTML structure as follows, interested friends can refer to the following
Principle: The use of a label and I tag each of the background combination into a button to achieve adaptive.
Copy Code code as follows:
<! 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> this is button </i> </a>
<a href= "#" class= "BTN" > <i> button </i> </a>
</body>
</html>
Effect: