LEARN Web Designing And Web Development

Material Design Floating Action Button with jQuery - KC FAB

File Size:	7.87 KB
Views Total:	481
Last Update:	about 4 hours ago
Publish Date:	10 days ago
Official Website:	Go to website
License:	MIT How to use it: 1. Load the required kc.fab.css that includes basic styles and awesome CSS3 powered ripple click effects for the floating action button. 1 <link rel="stylesheet" href="kc.fab.css"> 2. Load the Font Awesome Icon Font for button/action icons (Optional). 1 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 3. Create a container for the floating action button. 1 <div class="kc_fab_wrapper"> 2 </div> 4. Add links, custom colors, icons to the action button as follow. view source 01 var links = [ 02 { 03   "bgcolor":"#03A9F4", 04   "icon":"+" 05 }, 06 { 07   "url":"http://plus.google.com", 08   "bgcolor":"#DB4A39", 09   "color":"#fffff", 10   "icon":"<i class='fa fa-google-plus'></i>", 11   "target":"_blank" 12 }, 13 { 14   "url":"http://www.facebook.com", 15   "bgcolor":"#00ACEE", 16   "color":"#fffff", 17   "icon":"<i class='fa fa-<a href="http://www.jqueryscript.net/tags.php?/twitter/">twitter</a>'></i>", 18   "target":"_blank" 19 }, 20 { 21   "url":"http://www.facebook.com", 22   "bgcolor":"#3B5998", 23   "color":"#fffff", 24   "icon":"<i class='fa fa-facebook'></i>", 25   "target":"_blank" 26 }, 27 { 28   "url":"http://www.jqueryscript.net", 29   "bgcolor":"#263238", 30   "color":"white", 31   "icon":"<i class='fa fa-home'></i>" 32 } 33 ]

Demo Download

How to start using jQuery?

More in this category...

View our Recommended Plugins

TOP 100 jQuery Plugins 2014