Div + css implement adaptive width button _ experience exchange

Div + css implement adaptive width button P + css Realize Adaptive width button _ experience exchange

Let's take a look at the image:

The principle is to use the label and span label to combine A complete rounded rectangle through the left and right alignment of the background. Then use the hover label to slide the image. You only need one image:


OK. Check the code.
CSS:

The Code is 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:

The Code is as follows:

   CSS adaptive width rounded corner button @ 5key.netThe home page is not the home page. Maybe it is the home page, but it must not be the home page. Don't talk about it ~

Demo:

   
  CSS adaptive width button    CSS adaptive width rounded corner buttonThe home page is not the home page. Maybe it is the home page, but it must not be the home page. Don't talk about it ~ 

The above is the content of experience exchange between p + css and auto-adaptive width button. For more information, see PHP Chinese website (www.php1.cn )!