按钮美化，变化显示效果
生活随笔
收集整理的這篇文章主要介紹了
按钮美化，变化显示效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
第一種：用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
總結
以上是生活随笔為你收集整理的按钮美化，变化显示效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MongoDB学习笔记lt;四gt;
- 下一篇： Vim 键盘指令高清图