Add materializecss.com to webflow
I have only experimented with the simplest component of Materialize the 'Waves' effect.
Waves ButtonIt works on a 'div' with an image background set too.
Step.1
First add this snippet of CSS to your website's <head> section:</head>
<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 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 ButtonPublish it!
You're all done, you'll be able to see the Waves Effect once published and view through your browser!