<!DOCTYPE html>
<html lang="en">
<head>
<!-- Title -->
<title>Alpha | Responsive Admin Dashboard Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta charset="UTF-8">
<meta name="description" content="Responsive Admin Dashboard Template" />
<meta name="keywords" content="admin,dashboard" />
<meta name="author" content="Steelcoders" />
<!-- Styles -->
<link type="text/css" rel="stylesheet" href="assets/plugins/materialize/css/materialize.min.css"/>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="assets/plugins/material-preloader/css/materialPreloader.min.css" rel="stylesheet">
<link href="assets/plugins/google-code-prettify/prettify.css" rel="stylesheet" type="text/css"/>
<!-- Theme Styles -->
<link href="assets/css/alpha.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/custom.css" rel="stylesheet" type="text/css"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="loader-bg"></div>
<div class="loader">
<div class="preloader-wrapper big active">
<div class="spinner-layer spinner-blue">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-spinner-teal lighten-1">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-yellow">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-green">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
<div class="mn-content fixed-sidebar">
<header class="mn-header navbar-fixed">
<nav class="cyan darken-1">
<div class="nav-wrapper row">
<section class="material-design-hamburger navigation-toggle">
<a href="#" data-activates="slide-out" class="button-collapse show-on-large material-design-hamburger__icon">
<span class="material-design-hamburger__layer"></span>
</a>
</section>
<div class="header-title col s3">
<span class="chapter-title">Alpha</span>
</div>
<form class="left search col s6 hide-on-small-and-down">
<div class="input-field">
<input id="search" type="search" placeholder="Search" autocomplete="off">
<label for="search"><i class="material-icons search-icon">search</i></label>
</div>
<a href="javascript: void(0)" class="close-search"><i class="material-icons">close</i></a>
</form>
<ul class="right col s9 m3 nav-right-menu">
<li><a href="javascript:void(0)" data-activates="chat-sidebar" class="chat-button show-on-large"><i class="material-icons">more_vert</i></a></li>
<li class="hide-on-small-and-down"><a href="javascript:void(0)" data-activates="dropdown1" class="dropdown-button dropdown-right show-on-large"><i class="material-icons">notifications_none</i><span class="badge">4</span></a></li>
<li class="hide-on-med-and-up"><a href="javascript:void(0)" class="search-toggle"><i class="material-icons">search</i></a></li>
</ul>
<ul id="dropdown1" class="dropdown-content notifications-dropdown">
<li class="notificatoins-dropdown-container">
<ul>
<li class="notification-drop-title">Today</li>
<li>
<a href="#!">
<div class="notification">
<div class="notification-icon circle cyan"><i class="material-icons">done</i></div>
<div class="notification-text"><p><b>Alan Grey</b> uploaded new theme</p><span>7 min ago</span></div>
</div>
</a>
</li>
<li>
<a href="#!">
<div class="notification">
<div class="notification-icon circle deep-purple"><i class="material-icons">cached</i></div>
<div class="notification-text"><p><b>Tom</b> updated status</p><span>14 min ago</span></div>
</div>
</a>
</li>
<li>
<a href="#!">
<div class="notification">
<div class="notification-icon circle red"><i class="material-icons">delete</i></div>
<div class="notification-text"><p><b>Amily Lee</b> deleted account</p><span>28 min ago</span></div>
</div>
</a>
</li>
<li>
<a href="#!">
<div class="notification">
<div class="notification-icon circle cyan"><i class="material-icons">person_add</i></div>
<div class="notification-text"><p><b>Tom Simpson</b> registered</p><span>2 hrs ago</span></div>
</div>
</a>
</li>
<li>
<a href="#!">
<div class="notification">
<div class="notification-icon circle green"><i class="material-icons">file_upload</i></div>
<div class="notification-text"><p>Finished uploading files</p><span>4 hrs ago</span></div>
</div>
</a>
</li>
<li class="notification-drop-title">Yestarday</li>
<li>
<a href="#!">
<div class="notification">
<div class="notification-icon circle green"><i class="material-icons">security</i></div>
<div class="notification-text"><p>Security issues fixed</p><span>16 hrs ago</span></div>
</div>
</a>
</li>
<li>
<a href="#!">
<div class="notification">
<div class="notification-icon circle indigo"><i class="material-icons">file_download</i></div>
<div class="notification-text"><p>Finished downloading files</p><span>22 hrs ago</span></div>
</div>
</a>
</li>
<li>
<a href="#!">
<div class="notification">
<div class="notification-icon circle cyan"><i class="material-icons">code</i></div>
<div class="notification-text"><p>Code changes were saved</p><span>1 day ago</span></div>
</div>
</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
<div class="search-results">
<div class="container search-container">
<div class="row">
<div class="col s12 search-head">
<div class="row">
<div class="col s12">
<div class="left">
<p class="search-results-title">Quick search results</p>
<p class="search-filter left">
<input type="checkbox" class="filled-in" id="filled-in-box" checked/>
<label for="filled-in-box">Google search</label>
</p>
</div>
</div>
</div>
<div class="res-not-found">No results found</div>
</div>
<div class="col s12 m4 search-result-container">
<div class="card card-transparent">
<div class="row valign-wrapper">
<div class="col s3">
<img src="assets/images/profile-image-1.png" alt="" class="circle responsive-img z-depth-1">
</div>
<div class="col s9">
<span class="search-result-text">
Search <span class="search-text search-result-highlight"></span><br><span class="secondary-search-text">Last active 2 days ago</span>
</span>
</div>
</div>
</div>
<div class="card card-transparent">
<div class="row valign-wrapper">
<div class="col s3">
<img src="assets/images/profile-image-3.jpg" alt="" class="circle responsive-img z-depth-1">
</div>
<div class="col s9">
<span class="search-result-text">
News about <span class="search-text search-result-highlight"></span><br><span class="secondary-search-text">23 Blogs</span>
</span>
</div>
</div>
</div>
<div class="card card-transparent">
<div class="row valign-wrapper">
<div class="col s3">
<img src="assets/images/profile-image.png" alt="" class="circle responsive-img z-depth-1">
</div>
<div class="col s9">
<span class="search-result-text">
Tom King (Works at <span class="search-text search-result-highlight"></span>)<br><span class="secondary-search-text">Avaible for freelance work</span>
</span>
</div>
</div>
</div>
</div>
<div class="col s12 m4 search-result-container">
<div class="card card-transparent ">
<div class="row valign-wrapper">
<div class="col s3">
<span class="z-depth-1 circle search-circle indigo lighten-1">F</span>
</div>
<div class="col s9">
<span class="search-result-text">
<span class="search-text search-result-highlight"></span> on Facebook<br><span class="secondary-search-text"><a href="#">View website</a></span>
</span>
</div>
</div>
</div>
<div class="card card-transparent">
<div class="row valign-wrapper">
<div class="col s3">
<span class="z-depth-1 circle search-circle light-blue lighten-1">T</span>
</div>
<div class="col s9">
<span class="search-result-text">
<span class="search-text search-result-highlight"></span> on Twitter<br><span class="secondary-search-text"><a href="#">View website</a></span>
</span>
</div>
</div>
</div>
<div class="card card-transparent">
<div class="row valign-wrapper">
<div class="col s3">
<span class="z-depth-1 circle search-circle red darken-1">G</span>
</div>
<div class="col s9">
<span class="search-result-text">
Google+ <span class="search-text search-result-highlight"></span><br><span class="secondary-search-text"><a href="#">View website</a></span>
</span>
</div>
</div>
</div>
</div>
<div class="col s12 m4 search-result-container">
<div class="card card-transparent">
<div class="card-content first">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sunt in culpa qui<span class="search-text search-result-highlight"></span> quis.</p>
</div>
<div class="card-action">
<span class="grey-text">Yesterday, 4:56 PM</span>
</div>
</div>
<div class="card card-transparent">
<div class="card-content">
<p>Sunt in culpa qui <span class="search-text search-result-highlight"></span> officia deserunt mollit anim id est laborum. officia deserunt mollit anim id est laborum officia deserunt mollit anim</p>
</div>
<div class="card-action">
<span class="grey-text">27 January 2016</span>
</div>
</div>
</div>
</div>
</div>
</div>
<aside id="chat-sidebar" class="side-nav white">
<div class="side-nav-wrapper">
<div class="col s12">
<ul class="tabs tab-demo" style="width: 100%;">
<li class="tab col s3"><a href="#sidebar-chat-tab" class="active">chat</a></li>
<li class="tab col s3"><a href="#sidebar-more-tab">settings</a></li>
</ul>
</div>
<div id="sidebar-chat-tab" class="col s12 sidebar-messages right-sidebar-panel">
<p class="right-sidebar-heading">CHAT LIST</p>
<div class="chat-list">
<a href="javascript:void(0)" class="chat-message">
<div class="chat-item">
<div class="chat-item-image">
<img src="assets/images/profile-image.png" class="circle" alt="">
</div>
<div class="chat-item-info">
<p class="chat-name">John Doe</p>
<span class="chat-message">Hello</span>
</div>
</div>
</a>
<a href="javascript:void(0)" class="chat-message">
<div class="chat-item">
<div class="chat-item-image">
<img src="assets/images/profile-image-1.png" class="circle" alt="">
</div>
<div class="chat-item-info">
<p class="chat-name">Tom Simpson</p>
<span class="chat-message">How are you?</span>
</div>
</div>
</a>
<a href="javascript:void(0)" class="chat-message">
<div class="chat-item">
<div class="chat-item-image">
<img src="assets/images/profile-image-3.jpg" class="circle" alt="">
</div>
<div class="chat-item-info">
<p class="chat-name">Alan Grey</p>
<span class="chat-message">Call me later</span></div>
</div>
</a>
<a href="javascript:void(0)" class="chat-message">
<div class="chat-item">
<div class="chat-item-image">
<img src="assets/images/profile-image.png" class="circle" alt="">
</div>
<div class="chat-item-info">
<p class="chat-name">Michael Fisher</p>
<span class="chat-message">How's it going?</span>
</div>
</div>
</a>
<a href="javascript:void(0)" class="chat-message">
<div class="chat-item">
<div class="chat-item-image">
<img src="assets/images/profile-image-1.png" class="circle" alt="">
</div>
<div class="chat-item-info">
<p class="chat-name">Amily Lee</p>
<span class="chat-message">We're good</span>
</div>
</div>
</a>
<a href="javascript:void(0)" class="chat-message">
<div class="chat-item">
<div class="chat-item-image">
<img src="assets/images/profile-image.png" class="circle" alt="">
</div>
<div class="chat-item-info">
<p class="chat-name">Sandra Smith</p>
<span class="chat-message">See you later!</span>
</div>
</div>
</a>
<a href="javascript:void(0)" class="chat-message">
<div class="chat-item">
<div class="chat-item-image">
<img src="assets/images/profile-image-3.jpg" class="circle" alt="">
</div>
<div class="chat-item-info">
<p class="chat-name">Sandra Smith</p>
<span class="chat-message">Can we meet?</span>
</div>
</div>
</a>
</div>
<div class="chat-sidebar-options">
<a href="#" class="left"><i class="material-icons">edit</i></a>
<a href="#" class="right"><i class="material-icons">settings</i></a>
</div>
</div>
<div id="sidebar-more-tab" class="col s12 sidebar-more right-sidebar-panel">
<p class="right-sidebar-heading">SYSTEM</p>
<div class="settings-list">
<div class="setting-item">
<div class="setting-text">Notifications</div>
<div class="setting-set">
<div class="switch">
<label>
<input type="checkbox" checked>
<span class="lever"></span>
</label>
</div>
</div>
</div>
<div class="setting-item">
<div class="setting-text">Quick Results</div>
<div class="setting-set">
<div class="switch">
<label>
<input type="checkbox" checked>
<span class="lever"></span>
</label>
</div>
</div>
</div>
<div class="setting-item">
<div class="setting-text">Auto Updates</div>
<div class="setting-set">
<div class="switch">
<label>
<input type="checkbox">
<span class="lever"></span>
</label>
</div>
</div>
</div>
</div>
<p class="right-sidebar-heading">ACCOUNT</p>
<div class="settings-list">
<div class="setting-item">
<div class="setting-text">Offline Mode</div>
<div class="setting-set">
<div class="switch">
<label>
<input type="checkbox">
<span class="lever"></span>
</label>
</div>
</div>
</div>
<div class="setting-item">
<div class="setting-text">Location</div>
<div class="setting-set">
<div class="switch">
<label>
<input type="checkbox">
<span class="lever"></span>
</label>
</div>
</div>
</div>
<div class="setting-item">
<div class="setting-text">Show Offline Users</div>
<div class="setting-set">
<div class="switch">
<label>
<input type="checkbox">
<span class="lever"></span>
</label>
</div>
</div>
</div>
<div class="setting-item">
<div class="setting-text">Save History</div>
<div class="setting-set">
<div class="switch">
<label>
<input type="checkbox">
<span class="lever"></span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</aside>
<aside id="chat-messages" class="side-nav white">
<p class="sidebar-chat-name">Tom Simpson<a href="#" data-activates="chat-messages" class="chat-message-link"><i class="material-icons">keyboard_arrow_right</i></a></p>
<div class="messages-container">
<div class="message-wrapper them">
<div class="circle-wrapper"><img src="assets/images/profile-image-1.png" class="circle" alt=""></div>
<div class="text-wrapper">Lorem Ipsum</div>
</div>
<div class="message-wrapper me">
<div class="circle-wrapper"><img src="assets/images/profile-image-3.jpg" class="circle" alt=""></div>
<div class="text-wrapper">Integer in faucibus diam?</div>
</div>
<div class="message-wrapper them">
<div class="circle-wrapper"><img src="assets/images/profile-image-1.png" class="circle" alt=""></div>
<div class="text-wrapper">Vivamus quis neque volutpat, hendrerit justo vitae, suscipit dui</div>
</div>
<div class="message-wrapper me">
<div class="circle-wrapper"><img src="assets/images/profile-image-3.jpg" class="circle" alt=""></div>
<div class="text-wrapper">Suspendisse condimentum tortor et lorem pretium</div>
</div>
<div class="message-wrapper them">
<div class="circle-wrapper"><img src="assets/images/profile-image-1.png" class="circle" alt=""></div>
<div class="text-wrapper">dolore eu fugiat nulla pariatur</div>
</div>
<div class="message-wrapper me">
<div class="circle-wrapper"><img src="assets/images/profile-image-3.jpg" class="circle" alt=""></div>
<div class="text-wrapper">Duis maximus leo eget massa porta</div>
</div>
</div>
<div class="message-compose-box">
<div class="input-field">
<input placeholder="Write message" id="message_compose" type="text">
</div>
</div>
</aside>
<aside id="slide-out" class="side-nav white fixed">
<div class="side-nav-wrapper">
<div class="sidebar-profile">
<div class="sidebar-profile-image">
<img src="assets/images/profile-image.png" class="circle" alt="">
</div>
<div class="sidebar-profile-info">
<a href="javascript:void(0);" class="account-settings-link">
<p>David Doe</p>
<span>david@gmail.com<i class="material-icons right">arrow_drop_down</i></span>
</a>
</div>
</div>
<div class="sidebar-account-settings">
<ul>
<li class="no-padding">
<a class="waves-effect waves-grey"><i class="material-icons">mail_outline</i>Inbox</a>
</li>
<li class="no-padding">
<a class="waves-effect waves-grey"><i class="material-icons">star_border</i>Starred<span class="new badge">18</span></a>
</li>
<li class="no-padding">
<a class="waves-effect waves-grey"><i class="material-icons">done</i>Sent Mail</a>
</li>
<li class="no-padding">
<a class="waves-effect waves-grey"><i class="material-icons">history</i>History<span class="new grey lighten-1 badge">3 new</span></a>
</li>
<li class="divider"></li>
<li class="no-padding">
<a class="waves-effect waves-grey"><i class="material-icons">exit_to_app</i>Sign Out</a>
</li>
</ul>
</div>
<ul class="sidebar-menu collapsible collapsible-accordion" data-collapsible="accordion">
<li class="no-padding"><a class="waves-effect waves-grey" href="index.html"><i class="material-icons">settings_input_svideo</i>Dashboard</a></li>
<li class="no-padding">
<a class="collapsible-header waves-effect waves-grey"><i class="material-icons">apps</i>Apps<i class="nav-drop-icon material-icons">keyboard_arrow_right</i></a>
<div class="collapsible-body">
<ul>
<li><a href="mailbox.html">Mailbox</a></li>
<li><a href="search.html">Search</a></li>
<li><a href="todo.html">Todo</a></li>
</ul>
</div>
</li>
<li class="no-padding active">
<a class="collapsible-header waves-effect waves-grey active"><i class="material-icons">code</i>Components<i class="nav-drop-icon material-icons">keyboard_arrow_right</i></a>
<div class="collapsible-body">
<ul>
<li><a href="ui-accordions.html">Accordion</a></li>
<li><a href="ui-badges.html">Badges</a></li>
<li><a href="ui-buttons.html">Buttons</a></li>
<li><a href="ui-typography.html">Typography</a></li>
<li><a href="ui-cards.html">Cards</a></li>
<li><a href="ui-carousel.html">Carousel</a></li>
<li><a href="ui-chips.html">Chips</a></li>
<li><a href="ui-color.html">Color</a></li>
<li><a href="ui-collections.html">Collections</a></li>
<li><a href="ui-dropdown.html">Dropdown</a></li>
<li><a href="ui-dialogs.html">Dialogs</a></li>
<li><a href="ui-grid.html">Grid</a></li>
<li><a href="ui-helpers.html">Helpers</a></li>
<li><a href="ui-modals.html">Modals</a></li>
<li><a href="ui-media.html">Media</a></li>
<li><a href="ui-icons.html">Icons</a></li>
<li><a href="ui-parallax.html">Parallax</a></li>
<li><a href="ui-preloader.html">Preloader</a></li>
<li><a href="ui-shadow.html">Shadow</a></li>
<li><a href="ui-tabs.html">Tabs</a></li>
<li><a href="ui-waves.html" class="active-page">Waves</a></li>
</ul>
</div>
</li>
<li class="no-padding">
<a class="collapsible-header waves-effect waves-grey"><i class="material-icons">desktop_windows</i>Layouts<i class="nav-drop-icon material-icons">keyboard_arrow_right</i></a>
<div class="collapsible-body">
<ul>
<li><a href="layout-blank.html">Blank Page</a></li>
<li><a href="layout-boxed.html">Boxed Layout</a></li>
<li><a href="layout-hidden-sidebar.html">Hidden Sidebar</a></li>
<li><a href="layout-right-sidebar.html">Right Sidebar</a></li>
</ul>
</div>
</li>
<li class="no-padding">
<a class="collapsible-header waves-effect waves-grey"><i class="material-icons">mode_edit</i>Forms<i class="nav-drop-icon material-icons">keyboard_arrow_right</i></a>
<div class="collapsible-body">
<ul>
<li><a href="form-elements.html">Form Elements</a></li>
<li><a href="form-wizard.html">Form Wizard</a></li>
<li><a href="form-upload.html">File Upload</a></li>
<li><a href="form-image-crop.html">Image Crop</a></li>
<li><a href="form-image-zoom.html">Image Zoom</a></li>
<li><a href="form-select2.html">Select2</a></li>
</ul>
</div>
</li>
<li class="no-padding">
<a class="collapsible-header waves-effect waves-grey"><i class="material-icons">grid_on</i>Tables<i class="nav-drop-icon material-icons">keyboard_arrow_right</i></a>
<div class="collapsible-body">
<ul>
<li><a href="table-static.html">Static Tables</a></li>
<li><a href="table-responsive.html">Responsive Tables</a></li>
<li><a href="table-data.html">Data Tables</a></li>
</ul>
</div>
</li>
<li class="no-padding"><a class="waves-effect waves-grey" href="charts.html"><i class="material-icons">trending_up</i>Charts</a></li>
<li class="no-padding">
<a class="collapsible-header waves-effect waves-grey"><i class="material-icons">my_location</i>Maps<i class="nav-drop-icon material-icons">keyboard_arrow_right</i></a>
<div class="collapsible-body">
<ul>
<li><a href="maps-google.html">Google Maps</a></li>
<li><a href="maps-vector.html">Vector Maps</a></li>
</ul>
</div>
</li>
<li class="no-padding">
<a class="collapsible-header waves-effect waves-grey"><i class="material-icons">tag_faces</i>Extra Pages<i class="nav-drop-icon material-icons">keyboard_arrow_right</i></a>
<div class="collapsible-body">
<ul>
<li><a href="404.html">404 Page</a></li>
<li><a href="500.html">500 Page</a></li>
<li><a href="invoice.html">Invoice</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="sign-in.html">Sign In</a></li>
<li><a href="sign-up.html">Sign Up</a></li>
<li><a href="lock-screen.html">Lock Screen</a></li>
<li><a href="pattern-lock-screen.html">Pattern Lock Screen</a></li>
<li><a href="forgot.html">Forgot Password</a></li>
<li><a href="pricing-tables.html">Pricing Tables</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="timeline.html">Timeline</a></li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="coming-soon.html">Coming Soon</a></li>
</ul>
</div>
</li>
</ul>
<div class="footer">
<p class="copyright">Steelcoders ©</p>
<a href="#!">Privacy</a> & <a href="#!">Terms</a>
</div>
</div>
</aside>
<main class="mn-inner">
<div class="row">
<div class="col s12">
<div class="page-title">Waves</div>
</div>
<div class="col s12 m12 l12">
<div class="card">
<div class="card-content">
Waves is an external library that we've included in Materialize to allow us to create the ink effect outlined in Material Design
</div>
</div>
</div>
<div class="col s12 m6 l6">
<div class="card">
<div class="card-content">
<span class="card-title">Applying Waves</span>
<p>To put the waves effect on buttons, you just have to put the class <code>waves-effect</code> on to the buttons. If you want the waves effect to be white instead, add both <code>waves-effect waves-light</code> as classes.</p><br>
<a class="waves-effect waves-light btn" href="#!">Wave</a>
</div>
</div>
<div class="card">
<div class="card-content">
<span class="card-title">Circle</span>
<p>If you want waves to form to a non rectangular shape, there is an option for circular waves. Just add the <code>waves-circle</code> in addition to <code>waves-effect</code></p><br>
<a href="#!" class="waves-effect waves-circle waves-light btn-floating btn-large">
<i class="material-icons">add</i>
</a>
</div>
</div>
<div class="card">
<div class="card-content">
<span class="card-title">Custom Colors</span>
<p>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</p><br>
<pre class="prettyprint">/*
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);
}</pre>
</div>
</div>
</div>
<div class="col s12 m6 l6">
<div class="card">
<div class="card-content">
<span class="card-title">Available Colors</span>
<p>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!</p><br>
<pre class="prettyprint"><a href="#!" class="btn waves-effect waves-teal">Send</a></pre>
<div class="collection waves-color-demo">
<div class="collection-item">Default<a href="#!" class="waves-effect btn secondary-content">Send</a></div>
<div class="collection-item"><code class=" language-markup">waves-light</code><a href="#!" class="waves-effect waves-light btn secondary-content">Send</a></div>
<div class="collection-item"><code class=" language-markup">waves-red</code><a href="#!" class="waves-effect waves-red btn secondary-content">Send</a></div>
<div class="collection-item"><code class=" language-markup">waves-yellow</code><a href="#!" class="waves-effect waves-yellow btn secondary-content">Send</a></div>
<div class="collection-item"><code class=" language-markup">waves-orange</code><a href="#!" class="waves-effect waves-orange btn secondary-content">Send</a></div>
<div class="collection-item"><code class=" language-markup">waves-purple</code><a href="#!" class="waves-effect waves-purple btn secondary-content">Send</a></div>
<div class="collection-item"><code class=" language-markup">waves-green</code><a href="#!" class="waves-effect waves-green btn secondary-content">Send</a></div>
<div class="collection-item"><code class=" language-markup">waves-teal</code><a href="#!" class="waves-effect waves-teal btn secondary-content">Send</a></div>
</div>
</div>
</div>
</div>
</div>
</main>
<div class="page-footer">
<div class="footer-grid container">
<div class="footer-l white"> </div>
<div class="footer-grid-l white">
<a class="footer-text" href="ui-tabs.html">
<i class="material-icons arrow-l">arrow_back</i>
<span class="direction">Previous</span>
<div>
Tabs
</div>
</a>
</div>
<div class="footer-r white"> </div>
<div class="footer-grid-r white">
<a class="footer-text" href="layout-blank.html">
<i class="material-icons arrow-r">arrow_forward</i>
<span class="direction">Next</span>
<div>
Blank Page
</div>
</a>
</div>
</div>
</div>
</div>
<div class="left-sidebar-hover"></div>
<!-- Javascripts -->
<script src="assets/plugins/jquery/jquery-2.2.0.min.js"></script>
<script src="assets/plugins/materialize/js/materialize.min.js"></script>
<script src="assets/plugins/material-preloader/js/materialPreloader.min.js"></script>
<script src="assets/plugins/jquery-blockui/jquery.blockui.js"></script>
<script src="assets/plugins/google-code-prettify/prettify.js"></script>
<script src="assets/js/alpha.min.js"></script>
<script src="assets/js/pages/waves.js"></script>
</body>
</html>