html中button按钮样式

1780阅读 0评论2015-08-17 QLL999
分类:Web开发

html源码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <title></title>       
<link type="text/css" rel="stylesheet" href="./new.css"/>    
</head>   
<body>       
1.<input type="button" value="查询" class="btn1"><br/>       
<br/>      
2.<input type="button" value="查询" class="btn2"><br/>       
<br/>       
3.<input type="button" value="查询" class="btn3"><br/>   
</body>
</html>


css样式

.btn1 {
    font-size: 9pt;
    color: #003399;
    border: 1px #003399 solid;
    color: #006699;
    border-bottom: #93bee2 1px solid;
    border-left: #93bee2 1px solid;
    border-right: #93bee2 1px solid;
    border-top: #93bee2 1px solid;
    background-image: url(../images/bluebuttonbg.gif);
    background-color: #e8f4ff;
    cursor: hand;
    font-style: normal;
    width: 60px;
    height: 22px;
 }
 
.btn2 {
    font-size: 9pt; color: #003366;    
 border: 0px #93bee2 solid;    
 border-bottom: #93bee2 1px solid;    
 border-left: #93bee2 1px solid;    
 border-right: #93bee2 1px solid;    
 border-top: #93bee2 1px solid;    
 background-image:url(../images/blue_button_bg.gif);    
 background-color: #ffffff;    
 cursor: hand;    
 font-style: normal ;
 }
 
.btn3 {   
 BORDER-RIGHT: #7b9ebd 1px solid;
 PADDING-RIGHT: 2px;
 BORDER-TOP: #7b9ebd 1px solid;
 PADDING-LEFT: 2px;
 FONT-SIZE: 12px;
 FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde);
 BORDER-LEFT: #7b9ebd 1px solid;
 CURSOR: hand; COLOR: black;
 PADDING-TOP: 2px;
 BORDER-BOTTOM: #7b9ebd 1px solid;
 }
 
.btn_mouseout {
    BORDER-RIGHT: #7EBF4F 1px solid;
 PADDING-RIGHT: 2px;
 BORDER-TOP: #7EBF4F 1px solid;
 PADDING-LEFT: 2px;
 FONT-SIZE: 12px;
 FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#B3D997);
 BORDER-LEFT: #7EBF4F 1px solid;
 CURSOR: hand;
 COLOR: black;
 PADDING-TOP: 2px;
 BORDER-BOTTOM: #7EBF4F 1px solid;
 }
 
.btn_mouseover {
    BORDER-RIGHT: #7EBF4F 1px solid;
 PADDING-RIGHT: 2px;
 BORDER-TOP: #7EBF4F 1px solid;
 PADDING-LEFT: 2px;
 FONT-SIZE: 12px;
 FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#CAE4B6);
 BORDER-LEFT: #7EBF4F 1px solid;
 CURSOR: hand;
 COLOR: black;
 PADDING-TOP: 2px;
 BORDER-BOTTOM: #7EBF4F 1px solid;
 }
 
.btn_mouseup {
    BORDER-RIGHT: #2C59AA 1px solid;
 PADDING-RIGHT: 2px;
 BORDER-TOP: #2C59AA 1px solid;
 PADDING-LEFT: 2px;
 FONT-SIZE: 12px;
 FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
 BORDER-LEFT: #2C59AA 1px solid;
 CURSOR: hand;
 COLOR: black;
 PADDING-TOP: 2px;
 BORDER-BOTTOM: #2C59AA 1px solid;
 }

上一篇:NTP时间服务器列表
下一篇:Linux内核主要功能介绍