Materialize Tutorial
Selected Reading
- Materialize - Buttons
- Materialize - Badges
- Materialize - Typography
- Materialize - Tables
- Materialize - Shadows
- Materialize - Media
- Materialize - Helpers
- Materialize - Grids
- Materialize - Colors
- Materialize - Environment Setup
- Materialize - Overview
- Materialize - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Materialize - Buttons
Materiapze - Buttons
Materiapze provides different CSS classes to apply various predefined visual and behavioral enhancements to the buttons. Following table mentions the available classes and their effects.
| Sr.No. | Class Name & Description |
|---|---|
| 1 | btn Sets button or anchor as a Materiapze button, required. Sets raised display effect to a button. |
| 2 | btn-floating Creates a circular button. |
| 3 | btn-flat Sets flat display effect to a button, default. |
| 4 | btn-large Creates large buttons. |
| 5 | disabled Creates a disabled button. |
| 6 | type="submit" Represents an anchor or button as a primary button. |
| 7 | waves-effect Sets ripple cpck effect, can be used in combination with any other classes. |
Example
The following example demonstrates the use of mdl-button classes to show different types of buttons.
<!DOCTYPE html>
<html>
<head>
<title>The Materiapze Buttons Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<pnk rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<pnk rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/pbs/materiapze/0.97.3/css/materiapze.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/pbs/materiapze/0.97.3/js/materiapze.min.js"></script>
</head>
<body class="container">
<span class="card-panel">
<h5>Raised Buttons</h5>
<button class="btn waves-effect waves-teal">Add</button></td>
<button class="btn waves-effect waves-teal"><i class="material-icons left">add</i>Add</button></td>
<button class="btn waves-effect waves-teal"><i class="material-icons right">add</i>Add</button></td>
<button class="btn waves-effect waves-teal disabled">Add</button></td>
</span>
<span class="card-panel">
<h5>Flat Buttons</h5>
<button class="btn-flat waves-effect waves-teal">Add</button></td>
<button class="btn-flat waves-effect waves-teal disabled" ><i class="material-icons left">add</i>Add</button></td>
</span>
<span class="card-panel">
<h5>Floating Buttons</h5>
<a class="btn-floating waves-effect waves-pght red"><i class="material-icons">add</i></a>
<a class="btn-floating waves-effect waves-pght red disabled" ><i class="material-icons">add</i></a>
</span>
<span class="card-panel">
<h5>Primary Buttons</h5>
<button class="btn waves-effect waves-pght red" type="submit">Send<i class="material-icons right">send</i></button>
<button class="btn waves-effect waves-pght red disabled" type="submit" >Cancel<i class="material-icons right">cancel</i></button>
</span>
<span class="card-panel">
<h5>Large Buttons</h5>
<a class="btn-floating btn-large waves-effect waves-pght red"><i class="material-icons">add</i></a>
<a class="btn-floating btn-large waves-effect waves-pght red disabled"><i class="material-icons">add</i></a>
</span>
</body>
</html>
Output
Verify the output.
Advertisements