css水波按鈕特效

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 18:49:59

css水波按鈕特效

css水波按鈕特效:css水波按鈕特效，免費提供源碼，對css有興趣的同學可以去研究研究哈~這對我們的css技術(shù)又是一種提升代碼：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>PH

推薦度：

點擊下載本文 文檔為doc格式

導讀css水波按鈕特效:css水波按鈕特效，免費提供源碼，對css有興趣的同學可以去研究研究哈~這對我們的css技術(shù)又是一種提升代碼：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>PH

css水波按鈕特效，免費提供源碼，對css有興趣的同學可以去研究研究哈~這對我們的css技術(shù)又是一種提升

3$[5GTKMLR]E81)G)UUBZG0.png

代碼：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>PHP中文網(wǎng)</title>
 <style>
  a{
  text-decoration:none;
  user-select:none;
  position: relative;
  display: block;
  margin: 100px auto;
  width:120px;
  height:50px;
  line-height:50px;
  text-align:center;
  border-radius:25px;
  color:#fff;
  font-size:16px;
  cursor:pointer;
  background-color: #ff8300;
  box-shadow: 0 3px 9px 0 rgba(255, 131, 0, 0.35);
  overflow: hidden;
  }

  a:after{
  position: absolute;
  content: "";
  display: block;
  margin: auto;
  left: -40px;
  top:-75px;
  width: 200px;
  height: 200px;
  background: #ff8300;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.8s;
  }
  a:hover{
   background-color: #FF9D00;
   top:-2px;
   box-shadow: 0 5px 13px 0 rgba(255, 131, 0, 0.59);
  }
  a:active{
   background-color: #ff8300;
   top:0;
   box-shadow: 0 3px 9px 0 rgba(255, 131, 0, 0.35);
  }
  a:active:after{
  width: 0;
  height: 0;
  left:60px;
  top: 25px;
  opacity: 1;
  transition-duration: 0s;
  }
 </style>
 </head>
 <body>
  <a href="javascript:void(0)">PHP中文網(wǎng)</a>
 </body>
</html>

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

css水波按鈕特效

推薦度：

點擊下載本文 文檔為doc格式

標簽：特效效果按鈕

熱門焦點

css水波按鈕特效

css水波按鈕特效

css水波按鈕特效

最新推薦

猜你喜歡

熱門推薦