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.CodeRight.
CSS:Copy codeThe 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 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 codeThe Code is as follows: <body>
<H1> <strong> CSS adaptive width rounded corner button @ 5key.net </strong> <A href = "#"> <span> homepage </span> </a>
<A href = "#"> <span> not the homepage </span> </a>
<A href = "#"> <span> he may be the homepage </span> </a>
<A href = "#"> <span> but it must not be the homepage </span> </a>
<A href = "#"> <span> okay. Don't talk about it ~ </Span> </a>
</Body>
Demo:Xmlns = "http://www.w3.org/1999/xhtml">
CSS adaptive width rounded corner button
Homepage
Not Homepage
He may be the homepage.
But he must not be the homepage.
Okay. Don't talk about it ~
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
