WHY SMARTY?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.

RECENTLY VISITED
CONTACT INFO
  • Address: PO Box 21132, Here Weare St,
    Melbourne, Vivas 2355 Australia
  • Phone: 1-800-565-2390
  • Email: support@yourname.com

Smarty Material Design

power of google material

EXPLORE COMPONENTS

MATERIAL COMPONENTS

MATERIAL : BUTTONS

The Material Design Lite (MDL) button component is an enhanced version of the standard HTML <button> element. A button consists of text and/or an image that clearly communicates what action will occur when the user clicks or touches it. The MDL button component provides various types of buttons, and allows you to add both display and click effects.

HOW TO ENABLE MATERIAL 
1. Add to html head, BEFORE essentials.css:

<link href="assets/plugins/mdl/material.indigo-blue.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


2. Add .enable-materialdesign class to body:
<body class="smoothscroll enable-animation enable-materialdesign">


NOTE: if you don't need 'Material Design Lite' javascript plugin, skip step 2 
(.enable-materialdesign class is used by assets/js/scripts.js to load MDL plugin from assets/plugins/mdl/)

COLOR SCHEME: We use blue as default color scheme. You can create your own material design color:
Click to create your material design color

Credits: MDL official


Colored FAB


With ripple
Show Code 
<!-- Colored FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
	<i class="material-icons">add</i>
</button>

<!-- Colored FAB button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
	<i class="material-icons">add</i>
</button>


Plain FAB


With ripple


Disabled
Show Code 
<!--FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab">
  <i class="material-icons">add</i>
</button>

<!-- FAB button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
  <i class="material-icons">add</i>
</button>

<!-- Disabled FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab" disabled>
  <i class="material-icons">add</i>
</button>


Raised Button


With ripple


Disabled
Show Code 
<!-- Raised button -->
<button class="mdl-button mdl-js-button mdl-button--raised">
  Button
</button>

<!-- Raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
  Button
</button>

<!-- Raised disabled button -->
<button class="mdl-button mdl-js-button mdl-button--raised" disabled>
  Button
</button>


Colored button


Accent colored


With Ripples
Show Code 
<!-- Colored raised button -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
	Button
</button>

<!-- Accent-colored raised button -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
	Button
</button>

<!-- Accent-colored raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
	Button
</button>


Flat button


With ripple


Disabled
Show Code 
<!-- Flat button -->
<button class="mdl-button mdl-js-button">
  Button
</button>

<!-- Flat button with ripple -->
<button class="mdl-button mdl-js-button mdl-js-ripple-effect">
  Button
</button>

<!-- Disabled flat button -->
<button class="mdl-button mdl-js-button" disabled>
  Button
</button>


Primary colored flat


Accent colored flat
Show Code 
<!-- Primary-colored flat button -->
<button class="mdl-button mdl-js-button mdl-button--primary">
  Button
</button>

<!-- Accent-colored flat button -->
<button class="mdl-button mdl-js-button mdl-button--accent">
  Button
</button>


Icon button


Colored
Show Code 
<!-- Icon button -->
<button class="mdl-button mdl-js-button mdl-button--icon">
  <i class="material-icons">mood</i>
</button>

<!-- Colored icon button -->
<button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
  <i class="material-icons">mood</i>
</button>


Icon button


Colored
Show Code 
<!-- Mini FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
  <i class="material-icons">add</i>
</button>

<!-- Colored mini FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
  <i class="material-icons">add</i>
</button>


Bootstrap Primary


Bootstrap Info


Bootstrap Danger


Bootstrap Warning
Show Code 
<!-- Bootstrap + Material Design -->
<button class="btn btn-primary mdl-js-button mdl-js-ripple-effect">Button</button>

<a class="btn btn-primary mdl-js-button mdl-js-ripple-effect">Button</a>
MDL class Effect Remarks
mdl-button Defines button as an MDL component Required
mdl-js-button Assigns basic MDL behavior to button Required
(none) Applies flat display effect to button (default)
mdl-button--raised Applies raised display effect Mutually exclusive with fab, mini-fab, and icon
mdl-button--fab Applies fab (circular) display effect Mutually exclusive with raised, mini-fab, and icon
mdl-button--mini-fab Applies mini-fab (small fab circular) display effect Mutually exclusive with raised, fab, and icon
mdl-button--icon Applies icon (small plain circular) display effect Mutually exclusive with raised, fab, and mini-fab
mdl-button--colored Applies colored display effect (primary or accent color, depending on the type of button) Colors are defined in material.min.css
mdl-button--primary Applies primary color display effect Colors are defined in material.min.css
mdl-button--accent Applies accent color display effect Colors are defined in material.min.css
mdl-js-ripple-effect Applies ripple click effect May be used in combination with any other classes