<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title > 收藏的几个css按钮样式 </ title >
</ head >
< style >
table {
width : 95% ;
border : 1px #E6D1B0 solid ;
background-color : #efe3ce ;
font-size : 11px ;
font-family : Tahoma ;
color : #FF6600 ;
text-align : center ;
}
.btn {
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
}
.btn1_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
}
.btn1_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
}
.btn2 { padding : 2 4 0
4 ; font-size : 12px ; height : 23 ; background-color : #ece9d8 ; border-width : 1 ; }
.btn3_mouseout {
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
}
.btn3_mouseover {
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=#D7E7FA) ; BORDER-LEFT : #2C59AA
1px solid ; CURSOR : hand ; COLOR : black ; PADDING-TOP : 2px ;
BORDER-BOTTOM : #2C59AA 1px solid
}
.btn3_mousedown
{
BORDER-RIGHT : #FFE400 1px solid ; PADDING-RIGHT : 2px ; BORDER-TOP :
#FFE400 1px solid ; PADDING-LEFT : 2px ; FONT-SIZE : 12px ; FILTER :
progid:DXImageTransform.Microsoft.Gradient(GradientType=0,
StartColorStr=#ffffff, EndColorStr=#C3DAF5) ; BORDER-LEFT : #FFE400
1px solid ; CURSOR : hand ; COLOR : black ; PADDING-TOP : 2px ;
BORDER-BOTTOM : #FFE400 1px solid
}
.btn3_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
}
.btn_2k3 {
BORDER-RIGHT : #002D96 1px solid ; PADDING-RIGHT : 2px ; BORDER-TOP :
#002D96 1px solid ; PADDING-LEFT : 2px ; FONT-SIZE : 12px ; FILTER :
progid:DXImageTransform.Microsoft.Gradient(GradientType=0,
StartColorStr=#FFFFFF, EndColorStr=#9DBCEA) ; BORDER-LEFT : #002D96
1px solid ; CURSOR : hand ; COLOR : black ; PADDING-TOP : 2px ;
BORDER-BOTTOM : #002D96 1px solid
}
</ style >
< body >
漂亮的按钮
< table >
< tr >
< td >
Hello world!
</ td >
</ tr >
</ table >
< button class =btn > 按钮样式1 </ button >
< br />
< br />
< button
class =btn1_mouseout onmouseover ="this.className='btn1_mouseover'"
onmouseout ="this.className='btn1_mouseout'"
> 按钮样式2 </ button >
< br />
< br />
< button
class =btn1_mouseout onmouseover ="this.className='btn1_mouseover'"
onmouseout ="this.className='btn1_mouseout'" DISABLED
> 按钮样式3 </ button >
< P >
< button class =btn2 > 按钮样式4 </ button >
< P >
< button class =btn3_mouseout
onmouseover ="this.className='btn3_mouseover'"
onmouseout ="this.className='btn3_mouseout'"
onmousedown ="this.className='btn3_mousedown'"
onmouseup ="this.className='btn3_mouseup'"
> 按钮样式5 </ button >
< P >
< button class =btn_2k3 > 按钮样式6 </ button >
</ body >
</ html >
漂亮的链接
< style >
<!--
body { font-family : Tahoma ; font-size : 8pt }
.leftmenu {
width : 150px ;
}
.leftmenu li {
display : inline ;
white-space : nowrap ;
}
.leftmenu span,
.leftmenu a:active,
.leftmenu a:visited,
.leftmenu a:link {
display : block ;
text-decoration : none ;
margin : 6px 10px 6px 0px ;
padding : 2px 6px 2px 6px ;
color : #00527f ;
background-color : #d9e8f3 ;
border : 1px solid #004266 ;
}
.leftmenu a:hover {
color : red ;
background-color : #8cbbda ;
}
.leftmenu span {
color : #a13100 ;
}
-->
</ style >
</ head >
< ul class ="leftmenu" >
< li >< a target ="_blank" href ="http://www.microsoft.com/china" > www.Microsoft.com </ a >
< li >< a target ="_blank" href ="http://www.google.com" > www.Google.com </ a >
< li >< a target ="_blank" href ="http://www.csdn.net/" > www.CSDN.Net </ a >
</ ul >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title > 收藏的几个css按钮样式 </ title >
</ head >
< style >
table {
width : 95% ;
border : 1px #E6D1B0 solid ;
background-color : #efe3ce ;
font-size : 11px ;
font-family : Tahoma ;
color : #FF6600 ;
text-align : center ;
}
.btn {
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
}
.btn1_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
}
.btn1_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
}
.btn2 { padding : 2 4 0
4 ; font-size : 12px ; height : 23 ; background-color : #ece9d8 ; border-width : 1 ; }
.btn3_mouseout {
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
}
.btn3_mouseover {
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=#D7E7FA) ; BORDER-LEFT : #2C59AA
1px solid ; CURSOR : hand ; COLOR : black ; PADDING-TOP : 2px ;
BORDER-BOTTOM : #2C59AA 1px solid
}
.btn3_mousedown
{
BORDER-RIGHT : #FFE400 1px solid ; PADDING-RIGHT : 2px ; BORDER-TOP :
#FFE400 1px solid ; PADDING-LEFT : 2px ; FONT-SIZE : 12px ; FILTER :
progid:DXImageTransform.Microsoft.Gradient(GradientType=0,
StartColorStr=#ffffff, EndColorStr=#C3DAF5) ; BORDER-LEFT : #FFE400
1px solid ; CURSOR : hand ; COLOR : black ; PADDING-TOP : 2px ;
BORDER-BOTTOM : #FFE400 1px solid
}
.btn3_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
}
.btn_2k3 {
BORDER-RIGHT : #002D96 1px solid ; PADDING-RIGHT : 2px ; BORDER-TOP :
#002D96 1px solid ; PADDING-LEFT : 2px ; FONT-SIZE : 12px ; FILTER :
progid:DXImageTransform.Microsoft.Gradient(GradientType=0,
StartColorStr=#FFFFFF, EndColorStr=#9DBCEA) ; BORDER-LEFT : #002D96
1px solid ; CURSOR : hand ; COLOR : black ; PADDING-TOP : 2px ;
BORDER-BOTTOM : #002D96 1px solid
}
</ style >
< body >
漂亮的按钮
< table >
< tr >
< td >
Hello world!
</ td >
</ tr >
</ table >
< button class =btn > 按钮样式1 </ button >
< br />
< br />
< button
class =btn1_mouseout onmouseover ="this.className='btn1_mouseover'"
onmouseout ="this.className='btn1_mouseout'"
> 按钮样式2 </ button >
< br />
< br />
< button
class =btn1_mouseout onmouseover ="this.className='btn1_mouseover'"
onmouseout ="this.className='btn1_mouseout'" DISABLED
> 按钮样式3 </ button >
< P >
< button class =btn2 > 按钮样式4 </ button >
< P >
< button class =btn3_mouseout
onmouseover ="this.className='btn3_mouseover'"
onmouseout ="this.className='btn3_mouseout'"
onmousedown ="this.className='btn3_mousedown'"
onmouseup ="this.className='btn3_mouseup'"
> 按钮样式5 </ button >
< P >
< button class =btn_2k3 > 按钮样式6 </ button >
</ body >
</ html >
漂亮的链接
< style >
<!--
body { font-family : Tahoma ; font-size : 8pt }
.leftmenu {
width : 150px ;
}
.leftmenu li {
display : inline ;
white-space : nowrap ;
}
.leftmenu span,
.leftmenu a:active,
.leftmenu a:visited,
.leftmenu a:link {
display : block ;
text-decoration : none ;
margin : 6px 10px 6px 0px ;
padding : 2px 6px 2px 6px ;
color : #00527f ;
background-color : #d9e8f3 ;
border : 1px solid #004266 ;
}
.leftmenu a:hover {
color : red ;
background-color : #8cbbda ;
}
.leftmenu span {
color : #a13100 ;
}
-->
</ style >
</ head >
< ul class ="leftmenu" >
< li >< a target ="_blank" href ="http://www.microsoft.com/china" > www.Microsoft.com </ a >
< li >< a target ="_blank" href ="http://www.google.com" > www.Google.com </ a >
< li >< a target ="_blank" href ="http://www.csdn.net/" > www.CSDN.Net </ a >
</ ul >