Cara Membuat Hover Button Fixed dengan Framework materialize.css
Hallo teman teman bertemu lagi dengan saya Ismet Maulana kali ini saya ingin berbagi pengetahuan mengenai Bagaimana Cara membangun hover button fixed seperti di program WHATSAPP MOBILE dengan Framework materialize.css. oke seketika 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 telah teman teman save yah kemudian jalankan di browsernya :
Lumayan gampang bukan ?semoga bermanfaat yah dan semakin giat pada menemukan ide ide baru, hingga jumpa di artikel berikutnya .
#KeepLearn
#IsmetMA
Sumber https://kursuswebsite.org
