Cara Membuat Hover Button Fixed dengan Framework materialize.css

Hallo teman teman bertemu lagi dengan saya Ismet Maulana kali ini saya ingin berbagi pengetahuan tentang Bagaimana Cara membuat hover button fixed seperti di aplikasi WHATSAPP MOBILE dengan Framework materialize.css. oke langsung saja yah teman teman, masih menggunakan framework materialize.css yah

Oke buka text editornya kemudian tuliskan script dibawah ini :

Script koneksi ke css materialize.css

<head>
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

Script body seperti ini :

<body>

<div class="fixed-action-btn horizontal" style="top: 45px; right: 24px;">
    <a class="btn-floating btn-large red">
      <i class="large material-icons">attach_file</i>
    </a>
    <ul>
      <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
      <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
      <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
      <li><a class="btn-floating blue"><i class="material-icons">mode_edit</i></a></li>
    </ul>
  </div>

</body>

Kalo sudah teman teman save yah kemudian jalankan di browsernya :

Cukup mudah bukan ?semoga bermanfaat yah dan semakin giat dalam menemukan ide ide baru, sampai jumpa di artikel selanjutnya .

#KeepLearn

#IsmetMA

Cara Membuat Hover Button Fixed dengan Framework materialize.css

Kategori