几个漂亮的 button 样式

最新推荐文章于 2023-01-10 21:05:30 发布

WaterShuiMiao

最新推荐文章于 2023-01-10 21:05:30 发布

阅读量1.2k

点赞数

分类专栏： javascript学习文章标签： button filter class c

javascript学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<style>  
 
 02.btn   {  
 
 03  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  
 
 04}  
 
 05.btn1_mouseout   {  
 
 06  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  
 
 07}  
 
 08.btn1_mouseover   {  
 
 09  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  
 
 10}  
 
 11.btn2   {padding:   2   4   0   4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;}  
 
 12.btn3_mouseout   {  
 
 13  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  
 
 14}  
 
 15.btn3_mouseover   {  
 
 16  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  
 
 17}  
 
 18.btn3_mousedown  
 
 19{  
 
 20  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  
 
 21}  
 
 22.btn3_mouseup   {  
 
 23  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  
 
 24}  
 
 25.btn_2k3   {  
 
 26  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  
 
 27}  
 
 28  
 
 29.btn_flat   {  
 
 30  BORDER-RIGHT:   #ffffff   1px   solid;   BORDER-TOP:   #ffffff   1px   solid;   FONT-SIZE:   12px;   FILTER:     BORDER-LEFT:   #ffffff   1px   solid;   CURSOR:   hand;   COLOR:   black;   BORDER-BOTTOM:   #ffffff   1px   solid  
 
 31}  
 
 32</style>  
 
 33<body>  
 
 34  
 
 35  
 
 36<button   class=btn_flat   title= "好看的按钮 "> 好看的按钮1 </button> <P> </p>  
 
 37  
 
 38<button   class=btn   title= "好看的按钮 "> 好看的按钮1 </button> <P> </p>  
 
 39<button   
 
 40class=btn1_mouseout   onmouseover= "this.className= 'btn1_mouseover ' " 
 
 41  onmouseout= "this.className= 'btn1_mouseout ' " 
 
 42  title= "好看的按钮 "> 好看的按钮2 </button>        
 
 43<button   
 
 44class=btn1_mouseout   onmouseover= "this.className= 'btn1_mouseover ' " 
 
 45  onmouseout= "this.className= 'btn1_mouseout ' "   DISABLED> 好看的按钮3 </button>  
 
 46<P>  
 
 47<button   class=btn2   title= "好看的按钮 "> 好看的按钮4 </button>  
 
 48<P>  
 
 49<button   class=btn3_mouseout   onmouseover= "this.className= 'btn3_mouseover ' " 
 
 50  onmouseout= "this.className= 'btn3_mouseout ' " 
 
 51  onmousedown= "this.className= 'btn3_mousedown ' " 
 
 52    onmouseup= "this.className= 'btn3_mouseup ' " 
 
 53    title= "好看的按钮 "> 好看的按钮5 </button>  
 
 54<P>  
 
 55<button   class=btn_2k3   title= "好看的按钮 "> 好看的按钮6 </button>  
 
 56   
 
 57   
 
 58  
 
 59</body> 
 
 60</html>

WaterShuiMiao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
几个漂亮的 button 样式

<style> 02.btn { 03 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, StartColorSt
复制链接

扫一扫