码迷,mamicode.com
首页 > 其他好文 > 详细

按钮美化,变化显示效果

时间:2015-02-07 13:03:08      阅读:170      评论: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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!