SVG漫反射光影按钮特效实例页面

CSS代码：

.filter {
    filter: url(#spotlight);
}

HTML代码：

<svg
  width="0"
  height="0"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="spotlight">
      <feDiffuseLighting
        result="spotlight"
        diffuseConstant="1"
        lighting-color="#FFF">
        <fePointLight x="20" y="10" z="40" />
      </feDiffuseLighting>
      <feComposite
        in="SourceGraphic"
        in2="spotlight"
        operator="arithmetic"
        k1="1"
        k2="0"
        k3="0"
        k4="0" />
    </filter>
  </defs>
</svg>

<h4>默认按钮</h4>
<button type="primary" is="ui-button">我是按钮</button>

<h4>应用滤镜</h4>
<button type="primary" class="filter" is="ui-button">我是按钮</button>