<head>
<meta charset="utf-8">
<title>按钮点击气泡效果</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<button class="bubbly-button">
  点击气泡动画
 </button>
</body>

body {
  font-size:16px;
  font-family:'Helvetica','Arial',sans-serif;
  text-align:center;
  background-color:#f8faff;
}
.bubbly-button {
  font-family:'Helvetica','Arial',sans-serif;
  display:inline-block;
  font-size:1em;
  padding:1em 2em;
  margin-top:100px;
  margin-bottom:60px;
  -webkit-appearance:none;
  appearance:none;
  background-color:#ff3de8;
  color:#fff;
  border-radius:4px;
  border:none;
  cursor:pointer;
  position:relative;
  transition:transform ease-in 0.1s,box-shadow ease-in 0.25s;
  box-shadow:0 2px 15px rgba(255,0,251,0.5);
}
.bubbly-button:focus {
  outline:0;
}
.bubbly-button:before,.bubbly-button:after {
  position:absolute;
  content:'';
  display:block;
  width:140%;
  height:100%;
  left:-20%;
  z-index:-1000;
  transition:all ease-in-out 0.5s;
  background-repeat:no-repeat;
}
.bubbly-button:before {
  display:none;
  top:-75%;
  background-image:radial-gradient(circle,#ff0081 20%,transparent 20%),radial-gradient(circle,transparent 20%,#ff0081 20%,transparent 30%),radial-gradient(circle,#ff0081 20%,transparent 20%),radial-gradient(circle,#ff0081 20%,transparent 20%),radial-gradient(circle,transparent 10%,#ff0081 15%,transparent 20%),radial-gradient(circle,#ff0081 20%,transparent 20%),radial-gradient(circle,#ff0081 20%,transparent 20%),radial-gradient(circle,#ff0081 20%,transparent 20%),radial-gradient(circle,#ff0081 20%,transparent 20%);
  background-size:10% 10%,20% 20%,15% 15%,20% 20%,18% 18%,10% 10%,15% 15%,10% 10%,18% 18%;
}
.bubbly-button:after {
  display:none;
  bottom:-75%;
  background-image:radial-gradient(circle,#ff0081 20%,transparent 20%),radial-gradient(circle,#ff0081 20%,transparent 20%),radial-gradient(circle,transparent 10%,#ff0081 15%,transparent 20%),radial-gradient(circle,#ff0081 20%,transparent 20%),radial-gradient(circle,#ff0081 20%,transparent 20%),radial-gradient(circle,#ff0081 20%,transparent 20%),radial-gradient(circle,#ff0081 20%,transparent 20%);
  background-size:15% 15%,20% 20%,18% 18%,20% 20%,15% 15%,10% 10%,20% 20%;
}
.bubbly-button:active {
  transform:scale(0.9);
  background-color:#e60074;
  box-shadow:0 2px 25px rgba(255,0,130,0.2);
}
.bubbly-button.animate:before {
  display:block;
  animation:topBubbles ease-in-out 0.75s forwards;
}
.bubbly-button.animate:after {
  display:block;
  animation:bottomBubbles ease-in-out 0.75s forwards;
}
@keyframes topBubbles {
  0% {
  background-position:5% 90%,10% 90%,10% 90%,15% 90%,25% 90%,25% 90%,40% 90%,55% 90%,70% 90%;
}
50% {
  background-position:0% 80%,0% 20%,10% 40%,20% 0%,30% 30%,22% 50%,50% 50%,65% 20%,90% 30%;
}
100% {
  background-position:0% 70%,0% 10%,10% 30%,20% -10%,30% 20%,22% 40%,50% 40%,65% 10%,90% 20%;
  background-size:0% 0%,0% 0%,0% 0%,0% 0%,0% 0%,0% 0%;
}
}@keyframes bottomBubbles {
  0% {
  background-position:10% -10%,30% 10%,55% -10%,70% -10%,85% -10%,70% -10%,70% 0%;
}
50% {
  background-position:0% 80%,20% 80%,45% 60%,60% 100%,75% 70%,95% 60%,105% 0%;
}
100% {
  background-position:0% 90%,20% 90%,45% 70%,60% 110%,75% 80%,95% 70%,110% 10%;
  background-size:0% 0%,0% 0%,0% 0%,0% 0%,0% 0%,0% 0%;
}
}
var animateButton = function(e) {
    e.preventDefault;
    // reset animation 复位动画
    e.target.classList.remove('animate');
    e.target.classList.add('animate');
    setTimeout(function() {
        e.target.classList.remove('animate');
    }, 700);
};

var btn = document.getElementsByClassName("bubbly-button");
for (var i = 0; i < btn.length; i++) {
    btn[i].addEventListener('click', animateButton, false);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.