按钮美化,变化显示效果
显示 效果 按钮 变化 美化
2023-09-14 09:00:35 时间
第一种:用css来做
多的不说,效果和代码如下:
1.效果
状态 | 显示效果 |
默认状态 | ![]() |
鼠标在时 | ![]() |
2.代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
第二种:用css结合事件来做
1.效果
略
2.代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
有何指教,请至信邮箱:1465567571@qq.com
相关文章
- Android 使用ContentProvider扫描手机中的图片,仿微信显示本地图片效果
- Qt之自定义输入框(度分秒、经纬度、格式化显示)-No21-QtCustomEdit
- DOM元素全屏显示解决方案(续)
- UILabel混合显示动画效果
- [翻译] LASIImageView - 显示进度指示并异步下载图片
- 水平交错效果显示图像
- 判断浏览器标签页是隐藏或者显示状态
- 百叶窗效果显示图像
- Open3D 读取、保存、显示点云
- vuetify框架中服务端分页的实现方式(指定初始显示记录数)
- uni-app实现组件菜单左右滑动并点击切换(选中居中显示)demo效果(整理)
- uniapp显示富文本效果demo(整理)
- JS在网页上显示当前日期和时间demo效果示例(整理)
- jshtml滚动时间横向显示demo效果示例(整理)
- 【CSS】标签显示模式 ② ( 行内元素 | 行内块元素 )
- jquery的toggle动画效果显示隐藏
- electron 显示对话框 showMessageBoxSync showMessageBox
- Win11怎么设置左右并排显示窗口?
- Ladda 应用提交表单的时候显示loading载入中 包含不同位置,不同效果
- [Unity3D]Unity3D游戏开发3D选择场景中的对象,并显示轮廓效果强化版
- Allegro中如何改变静态铜皮的显示效果
- Android 向上滑动(ListView)隐藏标题栏,向下滑动显示标题栏