Demo:
<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><title>ink_button</title><style>*{margin:0;padding:0;}body{width:100%;height:100%;font-family:sans-serif;background-image:linear-gradient(toright,#4facfe0%,#00f2fe100%);}#wrapper{width:800px;height:400px;display:flex;justify-content:center;align-items:center;margin:0auto;}.button{position:relative;width:260px;height:70px;display:flex;justify-content:center;align-items:center;overflow:hidden;margin:00.8rem;border-radius:10px;box-shadow:02px5pxrgba(0,0,0,0.2),03px8pxrgba(0,0,0,0.1);cursor:pointer;transition:all0.3scubic-bezier(0.1,0.22,0.3,1);}#btn1{background:#2980b9;}#btn2{background:#8e44ad;}#btn3{background:#16a085;}#btn4{background:#e74c3c;}.buttonspan{color:#fff;font-size:1rem;z-index:10;text-transform:uppercase;letter-spacing:2px;}.back{position:absolute;width:0;height:0;filter:url(#filter);border-radius:50%;z-index:5;transition:all2.5scubic-bezier(0.1,0.22,0.3,1);}#btn1.back{left:-50%;top:-50%;background:#27ae60;}#btn2.back{right:-50%;top:-50%;background:#c0392b;}#btn3.back{left:-50%;bottom:-50%;background:#34495e;}#btn4.back{right:-50%;bottom:-50%;background:#2980b9;}.button:hover.back{width:330px;height:160px;}</style></head>
关注我的微信公众号【前端基础教程从0开始】，加我微信，可以免费为您解答问题。回复“1”，拉你进程序员技术讨论群。回复“小程序”，领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”，领取300G前端，Java，微信小程序，Python等资源，让我们一起学前端。
<body><svgwidth="0"height="0"><filterid="filter"><feTurbulencetype="fractalNoise"baseFrequency=".02"numOctaves="9"/><feDisplacementMapin="SourceGraphic"scale="100"/></filter></svg><divid="wrapper"><divclass="button"id="btn1"><span>hover</span><divclass="back"></div></div><divclass="button"id="btn2"><span>hover</span><divclass="back"></div></div><divclass="button"id="btn3"><span>hover</span><divclass="back"></div></div><divclass="button"id="btn4"><span>hover</span><divclass="back"></div></div></div></body></html>
