Buttons are for interactivity
Buttons allow users to take actions, such as showing a modal dialog or navigation to a specific page or section, with a single click or tap.
Buttons should indicate that they can trigger an action and be easy to find in the User Interface. By default these button components use capitalized button text labels to distinguish the text label from surrounding text.
These buttons are created by adding the .btn class to a text link. The buttons with icons are created by adding the .btn class to a link container. Adding classes like .btn-small and .btn-large create the different sizes.
When a button is clicked in the browser you will a litle 'ripple' or 'ink' effect happening. This can be created by adding the .waves-effect class to the button.
Small Buttons
Regular Buttons
Large Buttons
Disabled Buttons
Colored Buttons
You can add a color class such as .red or .deep-puple to a button to change its color. Variations can be created using lighten or darken classes such as .lighten-3 or .darken-2. The are also accent classes, e.g. .accent-3 that can be added to create the effect you are looking for.
These text classes can be used on the text elements themeselves (including font icons). or they can be added to their parent containers.
Colored Waves
You can add a color class such as .red or .deep-puple to a button to change its color. Variations can be created using lighten or darken classes such as .lighten-3 or .darken-2. The are also accent classes, e.g. .accent-3 that can be added to create the effect you are looking for.
These text classes can be used on the text elements themeselves (including font icons). or they can be added to their parent containers.
Buttons with pronounced rising Hover Effect
You can control this effect by changing the box shadow.
The class .hover-rise adds a deeper rising effect when the button is hovered.
Button group
Sometimes buttons have to come in groups. Here is a simple but functional setup that can be easily tweaked into something super fancy.
Floating Button
A floating action button (FAB) represents the primary action of a screen.
Pill buttons
They have a different shape using the combination of the .btn-floating and .pill-floating classes.
Pulsing Button
Toggle Button
Click the 'I toggle stuff' button removes or adds the .show class for the purple message container. When the .show class is removed the .toggler class on the container scales the element down to zero with a 0.3s transition. Adding the .show class sets the scale back to 1.
In the same way other CSS properties such as opacity and translate can be defined for these classes for other (dis)appearing effects. The class toggle is controled through a snippet of Javascript placed in the Component container.