Distorted Button Effects with SVG Filters

A set of inspirational, highly experimental distortion effects for buttons using SVG filters.

DistortedButtonEffects_800x600

View demo Download source

Following our latest web experiment by Lucas Bebber where we created realistic heat and water distortion on images and text, we’d like to share some inspiration for these kind of effects on buttons. Applying SVG filters on HTML elements give us some great opportunity to get creative with click interactions, and that’s exactly what we are going to explore today.

The main idea is to apply distortion or blob filters to buttons and explore some creative possibilities.

If you remember the “Gooey effect” that Lucas also introduced last year, you might recall that this technique is using the CSS filter() function mixed with an SVG <filter>. This is now supported by modern browsers, which is really great because lots of other filter effects still aren’t, so let’s dig a bit more into it and see what we can do on buttons with this.

Attention: This is still a highly experimental technique which currently works best in Google Chrome and Firefox.

Let’s have a closer look at the technique used.

Setting up the Button

To begin, let’s create a simple button element:

<button class="button">Click me</button>

With some basic styling, our button looks like this:
bt

Then, we define the filter inside an SVG object which we will place in our HTML:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
  <defs>
    <filter id="filter">
      <feTurbulence type="fractalNoise" baseFrequency="0 0.15" numOctaves="1" result="warp" />
      <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warp" />
    </filter>
  </defs>
</svg>

Now we apply the filter we just created to the button in the following way:

.button {
  /* other styles */
  -webkit-filter: url("#filter");
  filter: url("/#filter");
}

The slash in the second declaration is important, if you want to have the filter properly applied in Firefox.

How the filter works

SVG filters offer an extensive list of primitives. Check out Lucas’ article to get a bit of background on them.

One of the primitives is particularly interesting for our example which is the <fedisplacementmap>.
The displacement map effect moves the pixels of the element you apply it to, based on the pixel values of an input of your choice.

<fedisplacementmap> can be applied on any DOM element based on different sources such as an image, a gradient or another SVG filter element. For the button we are building, we use the SVG’s <feTurbulence> element.

<feTurbulence> is a primitive that generates “noise” (based on the Perlin noise algorithm).

See what happens when we apply this alone to our button:

bt noise filter

The <baseFrequency> property is the important one here. It will define how the noise will be generated. It accepts two numbers as parameters that correspond to the effect on the x and y coordinates.

Play with the properties to understand how it works:

Now, let’s apply our <fedisplacementmap> filter and see what happen:

bt displacement map

The important property here is the scale: it defines the strength of the effect.

We also need to determine the sources of our filter: every filters accept two input sources with the properties in and in2. We define our first source as SourceGraphic (this is the HTML element we apply the filter to) and the second source as our first filter <feTurbulence> (we give it the name noise).

Now our displacement map knows that it must move the pixels of the SourceGraphic based on the noise generated with <feTurbulence>.

The xChannelSelector and yChannelSelector properties tells it which color (R, G or B) to use to define the pixel displacement on each axis.

Now we just have to animate these properties using JavaScript to have the achieve the effect (we use the Greensock animation library here):

You can adventure yourself and apply this to any HTML element. See the result on a textarea for example:

Some interesting possibilities here :)

SVG filters let us apply advanced algorithm like displacement maps really easily on web elements. All the complicated work is handled by the SVG filter element itself, all we are doing here is applying and animating some parameters.

And that’s it! Most of the effects in the demo are using the principle described.

Check out more ideas in the demo. Keep in mind that SVG filters can be applied to any HTML element so there is tons of other possibilities. Your imagination is the limit, but keep in mind to use these kind of effects wisely as filters can be quite resource intensive; refrain from applying them to large areas.

Note that support for CSS filters varies across browsers and the effects can also look slightly different. Make sure to always include a fallback.

Browser Support:
  • ChromeSupported
  • FirefoxSupported
  • Internet ExplorerNot supported
  • SafariNot supported
  • OperaNot supported

We hope you enjoyed these effects and find them inspirational!

View demo Download source

Previous:
Next:

Tagged with:

Adrien is a frontend developer at NEVERBLAND in London. Check out his work on Codepen.

View all contributions by

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 35

  1. 1

    Hi, looks really cool, but some makes my i7 fan spinning on single button. Is it worth it? Doesnt look like effective class for buttons.

  2. 2

    This is amazing work! I’m trying to figure out how to make the button link out to another page. I wrapped a href around the button and it doesn’t seem to work. Any suggestions?

    Thanks!

    • 3

      Nesting a button within a link is not valid code and will not work. I suspect that all you want is for an element to 1) work like a link, 2) look like a button, and 3) accept the filters described above. The harder way would be to overwrite the behavior of the button with JS and force it to work like a link. The easier way is to use CSS to style a link to look like a button and simply use the same filters in the CSS, but applied to the link.

      David Walsh went into more detail on the subject of buttons, links (anchors), and inputs a couple of years ago. https://davidwalsh.name/html5-buttons

  3. 4

    Wow !! It’s really awesome , its working 100% for me, i am web designer , i love to learn more creative animations, thanks for sharing wonderful animated effect.

  4. 6

    I don’t know why I can’t remove one without breaking the other one. Please help me…. Thanks in advance

  5. 7

    Hey Adrien!!

    Thanks very much for so nice buttons collection!! I loved them! =)

    Look… is there any shorter way to use the buttons more than 1 time? I’m creating a page where I will need to use the button more than one time. I got how to put it to work, and everything, but, I need to create a JS class for each button, and this is not so fast, to develop nor to load. Is there any “faster” way to achieve this?

    Cheers =)

  6. 8

    Are there any people test it on firefox ??.. It so terrible. i dont know why “http://tympanus.net” told “firefox was support” ??

  7. 9

    Looks like some of the effects don’t work anymore. Its a really cool effect and im wondering what would be causing the problem.

Follow this discussion

Leave a Comment