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");
}