[Demo]简单的css，html实现ink_button 墨水风按钮

效果：

当鼠标悬停时按钮上会出现墨水侵染的效果，截图上看不出效果，预览网址请点击。

实现：

• 主要效果是由 svg 来实现的，运用了 feTurbulence 和 feDisplacementMap 效果

<svg width="0" height="0"> 
	<filter id="filter">
		<feTurbulence type="fractalNoise" baseFrequency=".02" numOctaves="9" />
		<feDisplacementMap in="SourceGraphic" scale="100" />
	</filter>
</svg>

• 在每个按钮的周围都有着一个长宽为 0 的 div，赋予了 filter: url(#filter) ，当鼠标悬停时，这个div就会获取了一定的宽高，transition 中使用了 cubic-bezier 函数的变化效果。所以整体下来形成了一个墨水侵染的效果！
• 完整代码：请点击。

希望你喜欢 ：)