最近、私は良いボタンクリック効果を見ました。クリックすると、水波と波紋効果が生成されました。とても楽しかったので、単に実装しました（低いバージョンのブラウザの互換性の問題を考慮していません）
下の図に示すように、最初にその効果を見てみましょう（GIFソフトウェアの録音は少し悪いです、それはCraziのように見えます...）
この効果は、要素内のネストされた缶、またはCSS3によって実装できます。
Canvesの実装
Canvesによって実装されたコードのコピーは、オンラインで選択され、いくつかの重複する定義スタイルをわずかに削除し、JSコメントを与えました。コードは次のとおりです
HTMLコード
<a data-color = "＃2f5398">私を押してください！</a>
CSSコード
* {box-sizing：border-box; outline：none;} body {font-family： 'open sans'; font-size：100％; font-weight：300; line-height：1.5em; text-align：center;}。btn{border：none; display：inline-block; height; 40px; Text-align：center; line-height：40px; border-radius：5px;}。btn.color-1 {background-color：＃426fc5;}。相対;}。マテリアルデザインキャンバス{不透明：0.25;位置：絶対;トップ：0;左：0;}。JSコード
var canvas = {}、centerx = 0、centery = 0、color = ''、containers = document.getelementsbyclassname（ 'material-design'）context = {}、element = {}、riectius = 0、// callback requestanimframe = function（）{window.requestanimationframe | nequentrame | bedrame | mosquentrame | nequestrame | mosquentrame | nequestanimationframe window.orequestanimationframe ||。 {canvas = document.createelement（ 'canvas'）; canvas.addeventlistener（ 'click'、press、false）; containers [i] .appendchild（canvas）; canvas.style.width = '100％'; canvas.style.height = '100％ canvas.offseTheight;}}、//クリックして、クリック座標、要素サイズ、カラープレス= function（event）{color = event.toelement.parentelement.dataset.color; element = ement.toelement; context = element.getContext（ '2d'）; radius = 0; centryxx = 0; centryxx = 0; centra event.offsety; context.clearrect（0、0、element.width、element.height）; draw（）;}、// draw and aingation draw = function（）{context.beginpath（）; arc（centerx、centery、radius、0、2 * quart.pi、cultuntele = cultuntele = colontele = culter = dad.fill +fals;半径が要素の幅よりも小さいと判断することにより、半径 += 2は、radius += 2 if（radius <ements.width）{requestanimframe（draw）;}}; init（）;CSS3実装
次は、純粋に手作りのコードです... CSS3を実装する方が便利だと思います。CSSを書くのに慣れています...
HTMLコード
<a>私を押して！</a>
CSSコード
.waves {position：relative; cursor：pointer; display：inline-block; overflow：hidden; text-align： Center; -Webkit-Tap-Highlight-Color：透明; Z-Index：1;}。waves.waves-animation {position：absolute; border-radius：50％; width：25px; height：25px;不透明、-webkit-transform; -webkit-transform：scale（0）; transform：scale（0）; pointer-events：none} .ts-btn {width：200px; height：56px; line-height：56px; background：＃f57035;JSコード
document.addeventlistener（ 'domcontentloaded'、function（）{var duration = 750; // style string patchwork var forstyle = function（position）{var cssstr = ''; for（position.hasownproperty（key））csstr+= key+' ^ forts+マウスクリック位置var forrect = function（ターゲット）{var position = {top：0、left：0}、ele = document.documentelement; 'undefined'！= typeof target.getBoundingClientRect &&（position = target.get.boundingClientRect（）; window.pagexoffset -ele.clientleft}} var show = function（event）{var pdiv = event.target、cdiv = document.createelement（ 'div'）; pdiv.appendchild（cdiv）; var rectobj = forrect（pdiv）、_ heigh rectobj.left、_scale = 'scale（' + pdiv.clientwidth / 100 * 10 + '）'; var position = {top：_height + 'px'、left：_left + 'px'}; forstyle（position））、position [" - webkit-transform"] = _scale、position [" - moz-transform"] = _scale、position ["-moz-transform"] = _scale、position [" - ms-transform"] = _scale、position [" - o-transform" "1"、position ["-webkit-transition-duration"] = duration + "ms"、position [" - moz-transition-duration"] = durature + "ms"、position ["-o-transition-duration"] = duration + "ms"、position ["-" - "-webkit-transition-timing-function"] = duration + "ms" 「キュービックベジエ（0.250、0.460、0.450、0.940）」、位置["-"-moz-transition-timing-function "] =" cubic-bezier（0.250、0.460、0.450、0.940）」 0.940） "、position [" transition-timing-function "] =" cubic-bezier（0.250、0.460、0.450、0.940） "、cdiv.setattribute（" style "、forstyle（position））; var finishstyle = {opacity：0、" - webkit-transition-durtion-durterion "時間 "-moz-transition-duration"：duration + "ms"、 " - o-transition-duration"：duration + "ms"、 " - webkit-transform"：duration + "ms"、 " - webkit-transform"：_scale、 "-moz-transform"：_scale、 " - ms-transform"：_scale、 "：_scale _scale、 "-o-transform"：_scale、 "-o-transform"：_scale、 " - scale、" - o-transform "：_scale、" - scale、 " - top：_height +" px "、左：_left +" px "、}; forstyle（finishstyle））; setimeout（function（）{pdiv.removechild（cdiv）;}、duration）、100）} document.queryselector（ '。ウェーブ'）。addeventlistener（ 'click'、function（e）{show（e）;}、！1）;OK、それだけです、ちなみに、幸せな中年のフェスティバル〜