Material Floating Action Button
How do I make an material floating action button?
What is a material floating action button? How do you make a material floating action button? This script and codes were developed by Albert Miller on 23 August 2022, Tuesday.
Material Floating Action Button - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Material Floating Action Button</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<section class="FAB"> <div class="FAB__mini-action-button"> <div class="mini-action-button--hide mini-action-button"> <i class="mini-action-button__icon material-icons">assistant_photo</i> <p class="mini-action-button__text--hide">Add Flag</p> </div> <div class="mini-action-button--hide mini-action-button"> <i class="mini-action-button__icon material-icons">audiotrack</i> <p class="mini-action-button__text--hide">Add Song</p> </div> <div class="mini-action-button--hide mini-action-button"> <i class="mini-action-button__icon material-icons">videogame_asset</i> <p class="mini-action-button__text--hide">Add Game</p> </div> <div class="mini-action-button--hide mini-action-button"> <i class="mini-action-button__icon material-icons">palette</i> <p class="mini-action-button__text--hide">Add Art</p> </div> </div> <div class="FAB__action-button"> <i class="action-button__icon material-icons">add</i> <p class="action-button__text--hide">Add Customer</p> </div>
</section>
<div class="snackbar"><p class="snackbar-text">Added Art</p></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Material Floating Action Button - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Roboto:200,300,400);
@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
.snackbar { bottom: 1em; left: 1em; position: fixed;
}
.snackbar-text { background-color: #212121; border-radius: 0.19em; color: #FFF; display: inherit; font-family: 'Roboto'; font-size: 0.8em; font-weight: 200; min-width: 15em; padding: 1em 2em; position: relative; text-align: left;
}
.FAB { position: absolute; bottom: 30px; right: 60px; width: 56px;
}
.FAB__action-button, .FAB__mini-action-button { cursor: pointer; position: absolute;
}
.FAB__action-button { bottom: 0; right: 0;
}
.FAB__action-button:hover .action-button__icon { box-shadow: 0 0 8px rgba(0, 0, 0, 0.14), 0 8px 16px rgba(0, 0, 0, 0.28);
}
.FAB__mini-action-button { bottom: 0; right: 49px;
}
.action-button__icon { box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28); background-color: #ff4081; border-radius: 50%; color: #fff; padding: 16px;
}
.action-button__text--hide { display: none;
}
.action-button__text--show { background-color: #212121; border-radius: 3px; color: #fff; right: 75px; font-size: 14px; font-family: "Helvetica Neue"; opacity: .8; padding: 5px 9px; position: absolute; top: 2px; white-space: nowrap;
}
.mini-action-button__icon { box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28); background-color: #536DFE; border-radius: 50%; color: #fff; padding: 8px;
}
.mini-action-button__icon:hover { box-shadow: 0 0 8px rgba(0, 0, 0, 0.14), 0 8px 16px rgba(0, 0, 0, 0.28);
}
.mini-action-button__text--hide { display: none;
}
.mini-action-button__text--show { background-color: #212121; border-radius: 3px; color: #fff; display: block; right: 60px; font-size: 14px; font-family: "Helvetica Neue"; opacity: .8; padding: 5px 9px; position: absolute; top: -6px; white-space: nowrap;
}
.mini-action-button--show { position: absolute; text-align: center;
}
.mini-action-button--hide { display: none; opacity: 0;
}
.mini-action-button--show:nth-child(1) { bottom: 100px;
}
.mini-action-button--show:nth-child(2) { bottom: 180px;
}
.mini-action-button--show:nth-child(3) { bottom: 260px;
}
.mini-action-button--show:nth-child(4) { bottom: 340px;
}
.mini-action-button--show:nth-child(5) { bottom: 420px;
}
.mini-action-button--show:nth-child(6) { bottom: 500px;
}
.mini-action-button--show:nth-child(7) { bottom: 580px;
}
.mini-action-button--show:nth-child(8) { bottom: 660px;
}
.mini-action-button--show:nth-child(9) { bottom: 740px;
}
.mini-action-button--show:nth-child(10) { bottom: 820px;
}
Material Floating Action Button - Script Codes JS Codes
var x = $('.FAB__mini-action-button').find('.mini-action-button--hide').length * 60 + 60;
$('.FAB').hover(function(){ $('.FAB').height(x);
}, function(){ $('.mini-action-button--show').attr('class', 'mini-action-button--hide'); $('.FAB').height(0);
});
$('.mini-action-button').hover(function(){ $(this).find('.mini-action-button__text--hide').attr('class', 'mini-action-button__text--show');
}, function(){ $(this).find('.mini-action-button__text--show').attr('class', 'mini-action-button__text--hide');
});
$('.FAB__action-button').hover(function(){ $(this).find('.action-button__text--hide').attr('class', 'action-button__text--show'); $('.mini-action-button--hide').attr('class', 'mini-action-button--show');
}, function(){ $(this).find('.action-button__text--show').attr('class', 'action-button__text--hide');
});
Developer | Albert Miller |
Username | SinceSidSlid |
Uploaded | August 23, 2022 |
Rating | 3.5 |
Size | 3,572 Kb |
Views | 40,480 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Material Toggle Switch | 2,427 Kb |
Chart Loading Animation | 2,539 Kb |
Material Calendar | 2,818 Kb |
Material Toggle Box Thing | 2,637 Kb |
Payment Progress | 4,498 Kb |
Order Redesign | 5,080 Kb |
User Role Hierarchy | 5,738 Kb |
Loading State 2 | 2,827 Kb |
Loading State | 2,600 Kb |
Alternative Material Tabs | 2,418 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
CSS Heart Loaders | Nourabusoud | 2,161 Kb |
Donut Chart example - MorrisJS | Capelo | 2,385 Kb |
Wave Lines | Mikehobizal | 4,023 Kb |
CSS Donut Charts | Seanstopnik | 2,908 Kb |
Sticky div | Kaslab | 2,225 Kb |
VerbalExpressions Converter | Cmalven | 2,607 Kb |
Vertical drag to change | Plasm | 4,488 Kb |
Banner Ad | Raquellorenzana | 4,172 Kb |
Monochrome Form | AlienPiglet | 3,096 Kb |
Videogular - Overlay Play Plugin | 2fdevs | 2,432 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!