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.
< Style Type = "Text/CSS" >
HTML, body, Div, span, P, IMG, A, UL, Li, table, TR, TD, form, input, button, textarea {} {
Margin : 0 ;
Padding : 0 ;
Border : 0 ;
}
Body {} {
color : #000 ;
font : normal 12px/180% tahoma, Arial, Helvetica, sans-serif, "" ;
}
Ul, Li {} {
List-style-type:None;
}
A {} {Text-Decoration:None;}
. Div {} {
Margin:100px;
}
A. ad_7day_button: hover {} {
Background:Url(ad_button.gif) No-repeat left top;
}
. Ad_7day_button {} {
Padding-left : 10px ;
Background : Url(ad_button.gif) No-repeat left top ;
Float : Left ;
Display : Block ;
Height : 27px ;
Margin-left : 10px
}
. Ad_7day_button Span {} {
Line-height : 14px ;
Font-size : 14px ;
Padding : 7px 10px 6px 0 ;
Background : Url(ad_button.gif) No-repeat right top ;
Display : Block ;
Color : # 4f463f ;
}
</ Style >
< Div Class = "Div" >
< A Class = "Ad_7day_button" Href = "#" > < Span > Register now </ Span > </ A >
< BR /> < BR /> < BR /> < BR />
< A Class = "Ad_7day_button" Href = "#" > < Span > Register </ Span > </ A >
< BR /> < BR /> < BR /> < BR />
< A Class = "Ad_7day_button" Href = "#" > < Span > Save and next </ Span > </ A >
< BR /> < BR /> < BR /> < BR />
< A Class = "Ad_7day_button" Href = "#" > < Span > Save and next save and next </ Span > </ A >
</ Div >