css| Button | Page today the company platform in front of the designer to do the button part of the redesign, the original use of JS to achieve the image of alternating changes in the way, but the disadvantage is: the use of the ID in the input, and disabled also can not be used, not conducive to the design of the program.
button to recreate the idea:
1, realize the difference between triggering and not triggering;
2, the application of input and A;
3, a variety of browsers without differences.
button re-production process:
1, using different styles to achieve the difference between triggering and not triggering;
2, using Boder to simulate button shadow
The following code in IE6, IE7, FF test normal!
CSS section:
. button-style01{
Color: #5E7384;
Font-weight:bold;
Background: #CBDBE5;
border-top:1px solid #f1f1f1;
border-left:1px solid #f1f1f1;
border-right:2px solid #666;
border-bottom:2px solid #666;
height:25px
}
. button-style02{
Color: #fff;
Font-weight:bold;
Background: #859BAB;
border:1px solid #f1f1f1;
border-top:1px solid #f1f1f1;
border-left:1px solid #f1f1f1;
border-right:2px solid #666;
border-bottom:2px solid #666;
height:25px
}
A.BUTTON-STYLE01,A.BUTTON-STYLE02 {
Display:block;
height:22px;
line-height:22px;
Vertical-align:middle;
padding:0px 8px;
}
a.button-style01:link,a.button-style01:visited {
Text-decoration:none;
Color: #5E7384;
border-top:1px solid #f1f1f1;
border-left:1px solid #f1f1f1;
border-right:2px solid #666;
border-bottom:2px solid #666;
}
a.button-style02:hover,a.button-style02:active {
Text-decoration:none;
Color: #fff;
border-top:1px solid #f1f1f1;
border-left:1px solid #f1f1f1;
border-right:2px solid #333;
border-bottom:2px solid #333;
}
xhtml section:
<input type= "Submit" name= "Login" id= "login" value= "Sign in" class= "button-style01" style= "width:70px;"/>
<a href= "#" class= "button-style01" >join free</a>
The following illustration is an effect chart:
