Go back

Fur button

How it works

This effect is made with an SVG filter applied to the button background. The filter is made distorting the button background with a noise effect.

html

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <defs>
    <filter id="fur-filter">
      <feTurbulence
        type="fractalNoise"
        baseFrequency="0.5"
        numOctaves="4"
        seed="0"
        stitchTiles="noStitch"
        result="feTurbulence"
      ></feTurbulence>
      <feDisplacementMap
        in="SourceGraphic"
        in2="feTurbulence"
        scale="6"
        xChannelSelector="R"
        yChannelSelector="G"
      ></feDisplacementMap>
    </filter>
  </defs>
</svg>
<button
  className="relative z-30 px-4 py-3 text-xl font-bold text-white transition-transform ease-spring duration-1000 hover:scale-105 active:scale-95"
>
  <div className="fur absolute left-0 top-0 -z-10 h-full w-full rounded-2xl bg-red-700"></div>
  button
</button>

CSS for the button

.fur {
  box-shadow: 0px 4px 7px 0px rgba(255, 156, 120, 0.997) inset,
    0px -3px 10px 0px rgb(55, 5, 29) inset;
  filter: url("#fur-filter");
}