按钮美化，变化显示效果

最新推荐文章于 2023-09-07 16:59:22 发布

weixin_30819163

最新推荐文章于 2023-09-07 16:59:22 发布

阅读量241

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/andy9468/p/4278554.html

版权

第一种：用css来做

多的不说，效果和代码如下：

1.效果

状态	显示效果
默认状态
鼠标在时

2.代码

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
 5         
 6 
 7 <style type="text/css"> 
 8 #wrap .add-app{
 9     display:block;
10     width:100px;
11     height:28px;
12     line-height:28px;
13     text-align:center;
14     background:#962CC7;
15     color:white;
16     border-radius:4px;
17     text-decoration: none;
18 }
19 #wrap .add-app:visited{
20     color:white;
21 }
22 #wrap .add-app:hover{
23     background:#00A9F0;
24     color:white;
25     text-decoration: none;
26 }
27 </style>
28 
29  
30 </head>
31     </head>
32     <body>
33         <div id="wrap">
34             <a href="#" class="add-app">返回</a>
35         
36         </div>
37     </body>
38 </html>

View Code

第二种：用css结合事件来做

1.效果

略

2.代码

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
 5         
 6 
 7 <style type="text/css"> 
 8 .input_load{
 9       border:none;
10       width:84px;
11       height:35px;
12       padding:0 2px 4px 0;
13       *padding-bottom:0;
14       background:#0672AD;
15       font:16px/35px "微软雅黑";
16       color:#fff;
17       cursor:pointer;
18       border-radius:8px;
19 }
20 .input_on{
21       border:none;
22       width:84px;
23       height:35px;
24       padding:0 2px 4px 0;
25       *padding-bottom:0;
26       background:red;
27       font:16px/35px "微软雅黑";
28       color:#fff;
29       cursor:pointer;
30       border-radius:8px;
31 }
32 .input_out{
33       border:none;
34       width:84px;
35       height:35px;
36       padding:0 2px 4px 0;
37       *padding-bottom:0;
38       background:#0672AD;
39       font:16px/35px "微软雅黑";
40       color:#fff;
41       cursor:pointer;
42       border-radius:8px;
43 }
44 </style>
45 
46  
47 </head>
48     </head>
49     <body>
50         <input type="submit" value="保存添加" class="input_load"  onmousemove="this.className='input_on'" onmouseout="this.className='input_out'" />
51     </body>
52 </html>