<!DOCTYPE html>
<html>
? ? <head>
? ? ? ? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
? ? ? ? <title>水波紋效果</title>
? ? ? ? <style>
? ? .btn {
? ? position: relative;
? ? background-color: #4CAF50;
? ? border: none;
? ? font-size: 28px;
? ? color: #FFFFFF;
? ? padding: 20px;
? ? width: 200px;
? ? text-align: center;
? ? -webkit-transition-duration: 0.4s; /* Safari */
? ? transition-duration: 0.4s;
? ? text-decoration: none;
? ? overflow: hidden;
? ? cursor: pointer;
? ? }
.ripple {
? ? position: relative;
? ? overflow: hidden;
}
.ripple:after {
? ? content: "";
? ? display: block;
? ? position: absolute;
? ? width: 100%;
? ? height: 100%;
? ? top: 0;
? ? left: 0;
? ? pointer-events: none;
? ? background-image: radial-gradient(circle, #666 10%, transparent 10.01%);
? ? background-repeat: no-repeat;
? ? background-position: 50%;
? ? transform: scale(10, 10);
? ? opacity: 0;
? ? transition: transform .3s, opacity .5s;
}
.ripple:active:after {
? ? transform: scale(0, 0);
? ? opacity: .3;
? ? transition: 0s;
? ? ? ? </style>
? ? </head>
? ? <body>
<div class="container text-center">
? ? ? ? <button class="btn btn-default ripple btn-lg">Button</button>
? ? ? ? <button class="btn btn-default ripple btn-lg">Button with very long content</button>
</div>
? ? </body>
</html>
