First look at a picture:
The principle is to use a label and span label to combine a full rounded rectangle with the left and right alignment of the background. And then through the hover label to slide the picture. And all you need is a picture:
OK, look at the code.
Css:
Copy Code code as follows:
*{margin:0; padding:0;}
body{padding:10px; font-size:12px;}
h1{margin:0 padding:10px 0; font-size:14px; font-weight:bold;}
A{background:url (1.gif) left 0; color: #fff; text-decoration:none; height:30px; float:left; cursor:hand; margin:0 5px 0 0;}
A:hover{background:url (1.gif) left-30px;height:30px;}
A span{background:url (1.gif) right 0; padding:7px 8px 7px 0; margin:0 0 0 8px; Float:left; height:16px;}
A:hover Span{background:url (1.gif) right-30px; color: #000; padding:7px 8px 7px 0; margin:0 0 0 8px; height:16px; }
Html:
Copy Code code as follows:
<body>
<a href= "#" ><span> home </span></a>
<a href= "#" ><span> not home </span></a>
<a href= "#" ><span> he may be home </span></a>
<a href= "#" ><span> but he must not be home </span></a>
<a href= "#" ><span> well, that's it. Don't pull that ~</span></a>.
</body>
Demonstrate:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>css Adaptive Width button </title> <style> *{margin:0; padding:0;} body{padding:10px; font-size:12px;} h1{margin:0 padding:10px 0; font-size:14px; font-weight:bold;} A{background:url (/upload/20071122231110605.gif) left 0; Color: #fff; Text-decoration:none; height:30px; Float:left; Cursor:hand; margin:0 5px 0 0;} A:hover{background:url (/upload/20071122231110605.gif) left-30px;height:30px;} A span{background:url (/upload/20071122231110605.gif) right 0; PADDING:7PX 8px 7px 0; margin:0 0 0 8px; Float:left; height:16px;} A:hover Span{background:url (/upload/20071122231110605.gif) right-30px; color: #000; PADDING:7PX 8px 7px 0; margin:0 0 0 8px; height:16px; } </style> </pead> <body> <p><strong>css Adaptive Width Corner button </strong></p> <span> home </span> <span> not home </ Span> <span> He may be home </span> <span> but he must not be home </span> <span> Okay, just do it. Don't pull that off. ~</span> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
