Google Choice: Materialize

Welcome to GoogleDG – your one-stop destination for free learning resources, guides, and digital tools.

At GoogleDG, we believe that knowledge should be accessible to everyone. Our mission is to provide readers with valuable ebooks, tutorials, and tech-related content that makes learning easier, faster, and more enjoyable.

What We Offer:

📘 Free & Helpful Ebooks – covering education, technology, self-development, and more.
💻 Step-by-Step Tutorials – practical guides on digital tools, apps, and software.
🌐 Tech Updates & Tips – simplified information to keep you informed in the fast-changing digital world.
🎯 Learning Support – resources designed to support students, professionals, and lifelong learners.
✔ Latest world News

Our Vision

To create a digital knowledge hub where anyone, from beginners to advanced learners, can find trustworthy resources and grow their skills.

Why Choose Us?

✔ Simple explanations of complex topics
✔ 100% free access to resources
✔ Regularly updated content
✔ A community that values knowledge sharing

We are continuously working to expand our content library and provide readers with the most useful and relevant digital learning materials.

📩 If you’d like to connect, share feedback, or suggest topics, feel free to reach us through the Contact page.

Tuesday, March 7, 2017

Materialize - Buttons

The Materialize provides various CSS classes to apply various predefined visual and behavioral enhancements to the buttons. The below table mentions the available classes and their effects.

S.N.	Class Name & Description
1	btn Sets button or anchor as an Materialize button, required.Sets raised display effect to a button.
2	btn-floating Creates a circular button.
3	btn-flat Sets flat display effect to button, default.
4	btn-large Creates large buttons.
4	disabled Creates disabled button.
5	type="submit" Represents an anchor or button as primary button.
6	waves-effect Sets ripple click effect, can be used in combination with any other classes.

Example

The following example showcases the use of mdl-button classes to show different types of buttons.
materialize_buttons.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Buttons Example</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">      
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.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/libs/materialize/0.97.3/js/materialize.min.js"></script> 
   </head>
   <body class="container"> 
      <div 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>
      </div>
      <div 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>
      </div>
      <div class="card-panel">
         <h5>Floating Buttons</h5>
         <a class="btn-floating waves-effect waves-light red"><i class="material-icons">add</i></a>
         <a class="btn-floating waves-effect waves-light red disabled" ><i class="material-icons">add</i></a>
      </div>
      <div class="card-panel">
         <h5>Primary Buttons</h5>
         <button class="btn waves-effect waves-light red" type="submit">Send<i class="material-icons right">send</i></button>
         <button class="btn waves-effect waves-light red disabled" type="submit" >Cancel<i class="material-icons right">cancel</i></button>
      </div>
      <div class="card-panel">
         <h5>Large Buttons</h5>
         <a class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></a>
         <a class="btn-floating btn-large waves-effect waves-light red disabled"><i class="material-icons">add</i></a>
      </div>
   </body>   
</html>

Result

Verify the result.

পৃষ্ঠাসমূহ

Labels

Search Your Article

CS