CSS样式参考

<! 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 >