用SVG给页面上的按钮添加个性的点击效果

用SVG给页面上的按钮添加个性的点击效果，点击查看效果。

代码在GitHub上有，所以本文来看下代码使用方式。

使用方法

首先，GitHub的右上方的“Download Zip”zip文件下载。

然后将zip文件解压，将解压后js文件夹中的「TweenMax.min.js」和「main.js」加在网页的</body>前面；

<script src="js/TweenMax.min.js"></script>
<script src="js/main.js"></script>

加载css文件夹中的「main.css」样式表；

<link href="css/main.css"/ rel="stylesheet">

HTML代码示例：

<button id="component-1" class="button button--1">
  Click me
  <span class="button__container">
  <span class="circle top-left"></span>
  <span class="circle top-left"></span>
  <span class="circle top-left"></span>
  <span class="button__bg"></span>
  <span class="circle bottom-right"></span>
  <span class="circle bottom-right"></span>
  <span class="circle bottom-right"></span>
  </span>
</button>

将SVG代码添加在页面的body标签中，位置没有限制：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
  <defs>
  <filter id="filter-goo-1">
  <feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur" />
  <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
  <feComposite in="SourceGraphic" in2="goo" />
  </filter>
  </defs>
</svg>

从GitHub中下载的代码中还有更多的按钮点击效果，具体的使用方法可以参考文件中的demo。

官方演示：Distorted Button Effects - Codrops

GitHub：GitHub – codrops/DistortedButtonEffects