css3 滑鼠hover事件背景顏色漸變
阿新 • • 發佈：2018-12-31
由於經常會用到寫按鈕的一些樣式，經常要重新寫，不如儲存一次，以後直接到這裡拿。
執行的效果圖是這樣的：
這是全部的程式碼，直接複製走就可以運行了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> *{margin: 0; padding: 0;} .container{ margin: 0 auto; padding-top: 30px; width: 1000px; } .btn{ display: inline-block; padding: 0 30px; width: auto; height: 35px; font: 14px/35px 'microsoft yahei'; color: #fff; border: 0; border-radius: 3px; text-align: center; cursor: pointer; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .blueBtn{ background: #5dcbff; } /*藍色按鈕*/ .blueBtn:hover{ background: #40b6ee; } .orangeBtn{ background: #ff5700; }/*橙色按鈕*/ .orangeBtn:hover{ background: #e25d18; } .violetBtn{ background: #6680ff; }/*紫色按鈕*/ .violetBtn:hover{ background: #425de0; } .grayBtn{ background: #999; }/*灰色按鈕*/ .grayBtn:hover{ background: #7f7f7f; } </style> </head> <body> <div class="container"> <span class="btn blueBtn">藍色按鈕</span> <span class="btn orangeBtn">橙色按鈕</span> <span class="btn violetBtn">紫色按鈕</span> <span class="btn grayBtn">灰色按鈕</span> </div> </body> </html>