Onsen UI CSS Component Material Fab

Last Updated : 13 Jun, 2022

Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop.

In this article, we are going to implement the Onsen UI CSS Component Material Fab. Fab or Floating Action Button is a button that floats on the screen and has a button that performs an action. Material Fabs are circular in shape and have a dark shadow under them.

Onsen UI CSS Component Material Fab Classes:

fab: This class is used in the button to make it fab.
disabled: This attribute makes the fab disabled.
fab–material: This class is used to make fab of material type.

Syntax:

<button class="fab fab--material">
    <i class="zmdi zmdi-globe"></i>
</button>

Example 1: In this example, we have different material fabs which show an alert message when clicked.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content= 
            "width=device-width, initial-scale=1.0" /> 
  
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsenui.css" /> 
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsen-css-components.min.css" /> 
    <script src= 
"https://unpkg.com/onsenui/js/onsenui.min.js"> 
    </script> 
    <script src= 
"https://code.jquery.com/jquery-3.6.0.min.js"> 
    </script> 
      
    <style> 
        #heading { 
            color: green; 
        } 
  
        #title { 
            font-style: bold; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 id="heading"> 
            GeeksforGeeks 
        </h1> 
        <strong id="title"> 
            Onsen UI CSS Component Material Fab 
        </strong> 
        <br /> <br /> <br /> <br /> 
  
        <button onclick="showAlert('Globe')" 
                class="fab fab--material"> 
            <i class="zmdi zmdi-globe"></i> 
        </button> 
  
        <button onclick="showAlert('Phone')" 
                class="fab fab--material"> 
            <i class="zmdi zmdi-phone"></i> 
        </button> 
  
        <button onclick="showAlert('Plus')" 
                class="fab fab--material"> 
            <i class="zmdi zmdi-plus"></i> 
        </button> 
  
        <button onclick="showAlert('Google')" 
                class="fab fab--material"> 
            <i class="zmdi zmdi-google"></i> 
        </button> 
    </center> 
  
    <script> 
        function showAlert(message) { 
            alert(`FAB CLICKED: ${message}`) 
        } 
    </script> 
</body> 
  
</html>

Output:

Example 2: In this example, when we disable the material fabs by clicking on it.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content= 
            "width=device-width, initial-scale=1.0" /> 
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsenui.css" /> 
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsen-css-components.min.css" /> 
    <script src= 
"https://unpkg.com/onsenui/js/onsenui.min.js"> 
    </script> 
    <script src= 
"https://code.jquery.com/jquery-3.6.0.min.js"> 
    </script> 
  
    <style> 
        #heading { 
            color: green; 
        } 
  
        #title { 
            font-style: bold; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 id="heading"> 
            GeeksforGeeks 
        </h1> 
        <strong id="title"> 
            Onsen UI CSS Component Material Fab 
        </strong> 
        <br /> <br /> <br /> <br /> 
  
        <button class="fab fab--material"> 
            <i class="zmdi zmdi-globe"></i> 
        </button> 
  
        <button class="fab fab--material"> 
            <i class="zmdi zmdi-phone"></i> 
        </button> 
  
        <button class="fab fab--material"> 
            <i class="zmdi zmdi-plus"></i> 
        </button> 
  
        <button class="fab fab--material"> 
            <i class="zmdi zmdi-google"></i> 
        </button> 
    </center> 
  
    <script> 
        $('.fab').click(function () { 
            $(this).attr('disabled', 'true') 
        }) 
    </script> 
</body> 
  
</html>