首页 > 其他 > 详细

按钮美化,变化显示效果

时间:2015-02-07 13:00:43      阅读:165      评论:0      收藏:0      [点我收藏+]

第一种:用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>
View Code

有何指教,请至信邮箱:1465567571@qq.com

按钮美化,变化显示效果

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!