html

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
  <defs>
    <filter id="filter1">
      <feTurbulence type="fractalNoise" baseFrequency="0.00" numOctaves="1" result="warp"></feTurbulence>
      <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warp" />
    </filter>
    <filter id="filter2">
      <feTurbulence type="fractalNoise" baseFrequency="0.01" numOctaves="1" result="warp"></feTurbulence>
      <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warp" />
    </filter>
    <filter id="filter3">
      <feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="1" result="warp"></feTurbulence>
      <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warp" />
    </filter>
    <filter id="filter3">
      <feTurbulence type="fractalNoise" baseFrequency="0.03" numOctaves="1" result="warp"></feTurbulence>
      <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warp" />
    </filter>
    <filter id="filter4">
      <feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="1" result="warp"></feTurbulence>
      <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warp" />
    </filter>
    <filter id="filter5">
      <feTurbulence type="fractalNoise" baseFrequency="0.03 0.01" numOctaves="1" result="warp"></feTurbulence>
      <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warp" />
    </filter>
    <filter id="filter6">
      <feTurbulence type="fractalNoise" baseFrequency="0.02 0.02" numOctaves="1" result="warp"></feTurbulence>
      <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warp" />
    </filter>
    <filter id="filter7">
      <feTurbulence type="fractalNoise" baseFrequency="0.01 0.03" numOctaves="1" result="warp"></feTurbulence>
      <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warp" />
    </filter>
    <filter id="filter8">
      <feTurbulence type="fractalNoise" baseFrequency="0.00 0.0" numOctaves="1" result="warp"></feTurbulence>
      <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warp" />
    </filter>
  </defs>
</svg>
<p class="button">distotion</p>

scss

.button {
  width: max-content;
  margin-inline: auto;
  margin-top: 20px;
  background-color: #222;
  color: white;
  padding: 20px 40px;
  filter: url("/#filter1");
  animation: distotion 1s infinite;
}

.svg-filters {
  position: absolute;
  visibility: hidden;
  width: 1px;
  height: 1px;
}

@keyframes distotion {
  0% {
    filter: url("/#filter1");
  }
  10% {
    filter: url("/#filter2");
  }
  20% {
    filter: url("/#filter3");
  }
  30% {
    filter: url("/#filter3");
  }
  40% {
    filter: url("/#filter4");
  }
  50% {
    filter: url("/#filter5");
  }
  60% {
    filter: url("/#filter6");
  }
  70% {
    filter: url("/#filter7");
  }
  80% {
    filter: url("/#filter8");
  }
}