按钮美化，变化显示效果

第一种：用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

转载于:https://www.cnblogs.com/andy9468/p/4278554.html

按钮美化，变化显示效果相关推荐

iOS 9应用开发教程之使用代码添加按钮美化按钮
iOS 9应用开发教程之使用代码添加按钮美化按钮丰富的用户界面在iOS9中提供了很多的控件以及视图来丰富用户界面,对于这些视图以及控件我们在上一章中做了简单的介绍.本章我们将详细讲解这些视图. i ...
java swing 禁用鼠标事件_Java学习笔记：swing中树控件，设置树节点的图标，按钮美化，鼠标事件，禁止鼠标双击...
树控件: JTree:声明树控件声明树的节点: DefaultMutableTreeNode dd=new DefaultMutableTreeNode("传入树节点名称"); ...
自定义按钮动态变化_新闻价值的变化定义
自定义按钮动态变化 I read Bari Weiss' resignation letter from the New York Times with some perplexity. In par ...
android多个按钮美化,Android按钮美化样式的实现代码
话不多说,上运行效果图在drawable文件夹下新建button_drawable.xml android:shape="rectangle"> android:bott ...
android按钮美化（入门）
android按钮美化话不多说,上运行效果图在drawable文件夹下新建button_drawable.xml <?xml version="1.0" encodin ...
h5 数字变化_基于JS实现数字动态变化显示效果附源码
先给大家展示下效果,感觉不错,可以参考实现代码,文末附有源码哦. 1.目标以液晶电子表样式,动态变化的在指定元素内显示数字. 目标关键词:动态变化(定时器),指定元素(DOM元素ID),数字(num ...
【Pyqt5】进度条QProgressBar的使用/多线程更新/按钮美化/图片编码/开机自启动
前言诚如标题所见,我在使用Pyqt5进行开发时,先后遇到了上面几个问题.本篇博客就用来记录遇到问题/解决问题的过程,希望能给遇到相同问题的读者一些参考. 项目背景我的项目是构建一个可视化的交互界面 ...
html的文本框、按钮美化
input框和按钮美化 input框美化按钮美化有时候一些后端人员,想写一个简单的表单验证的时候,前端美化问题是一个非常头疼的问题,我们直接用html的input标签和按钮会非常丑,这时候我们可以 ...
css input[type=file] 样式美化，input上传按钮美化
思路: 原文出处:http://www.haorooms.com/post/css_input_uploadmh input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0, ...

按钮美化，变化显示效果

按钮美化，变化显示效果相关推荐

最新文章

热门文章