@@include('./parts/head.html', { "plugin_fa_icons": true, "plugin_mdi_icons": true, "plugin_ion_icons": true, "plugin_wi_icons": true, "plugin_rickshaw": false, "plugin_nvd3": false, "plugin_flot": false, "plugin_sparkline": false, "plugin_markitup": false, "plugin_ckeditor": false, "plugin_select2": false, "plugin_dropzone": false, "plugin_tagsinput": false, "plugin_clockpicker": false, "plugin_pikaday": false, "plugin_spectrum": false, "plugin_inputmask": false, "plugin_parsley": false, "plugin_gmaps": false, "plugin_jvectormap": false, "plugin_datatables": false, "plugin_fullcalendar": false, "plugin_simpleweather": false, "plugin_prettify": true })
@@include('./parts/top-navbar.html') @@include('./parts/sidebar.html', { "page": "ui-waves", "classes": "yay-shrink yay-hide-to-small yay-gestures" })waves-effect
on to the buttons. If you want the waves effect to be white instead, add both waves-effect waves-light
as classes.
<a class="waves-effect waves-light btn-large" href="#">Wave</a>
There are several ways to customize waves, you can either use pre-created classes, or you can define your own color by creating a new class
To use these, just add the corresponding class to your button. Play around with changing the background color of butons and the waves effect to create something cool!
<a href="#!" class="btn waves-effect waves-teal">Press Me ;)</a>
waves-light
Press Me ;)waves-red
Press Me ;)waves-yellow
Press Me ;)waves-orange
Press Me ;)waves-purple
Press Me ;)waves-green
Press Me ;)waves-teal
Press Me ;)waves-pink
Press Me ;)waves-deep-purple
Press Me ;)waves-indigo
Press Me ;)waves-blue
Press Me ;)waves-light-blue
Press Me ;)waves-cyan
Press Me ;)waves-teal
Press Me ;)waves-light-green
Press Me ;)waves-lime
Press Me ;)waves-amber
Press Me ;)waves-deep-orange
Press Me ;)waves-brown
Press Me ;)If the color you want is not already available, you can easily make your own waves color by creating a custom CSS class. Take a look at the example below where we add a waves-brown effect
/* When creating your CSS selector, change "brown" to something of your choosing */ .waves-effect.waves-brown .waves-ripple { /* The alpha value allows the text and background color of the button to still show through. */ background-color: rgba(121, 85, 72, 0.65); }
waves-circle
in addition to waves-effect