Add materializecss.com to webflow

I have only experimented with the simplest component of Materialize the 'Waves' effect.

Waves Button

It works on a 'div' with an image background set too.

Step.1

First add this snippet of CSS to your website's <head> section:

<style>
    .waves-effect {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  vertical-align: middle;
  z-index: 1;
  will-change: opacity, transform;
  transition: all .3s ease-out;
}
.waves-effect .waves-ripple {
  position: absolute;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  opacity: 0;
  background: rgba(0, 0, 0, 0.3);
  transition: all 0.7s ease-out;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  -webkit-transform: scale(0);
          transform: scale(0);
  pointer-events: none;
}
</style>

Step.2

Second add the below CDN Javascript to the closing body </body> section:

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>

Step.3

Create a 'button' or 'div' give it a class of "waves-effect" and style it how ever you see fit. Be sure to experiment with different colours to see what works best.

Waves Button

Publish it!

You're all done, you'll be able to see the Waves Effect once published and view through your browser!