Let us do Forked and Experiment

Sekarang gw mau bereksperimen ria dengan variabel feColorMatrix, feBlur and feOffset! Coba lihat terlebih dahulu a pen by Paresh Deshpande. Saya forked kode yang sudah ada, dan berlaku untuk browsingan mozilla! Begini hasilnya. Nggak ada kerjaan ya sudah eksperimen saja dengan kode-kode yg sudah ada ;))
Masih di lingkungan codepen.io, ada seorang member @Sasha sudah membuat Floating Action Button sederhana yg terinspirasi dari web google! Tugas Koben hanya meng-kompile & mengakali satu variabel saja!

.container, .button, .nav {
position: absolute;
}
.container {
margin: auto;
top: 1em;
right: 55px;
width: 50px;
height: 100px;
}
#toggle {
display: none;
}
.button {
z-index: 999;
width: 43px;
height: 43px;
background: #F28482;
border-radius: 100%;
transition: all 0.5s ease-in-out;
box-shadow: 1px 3px 10px 0 rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.button:before {
position: absolute;
top: 20px;
left: 9px;
content: '';
width: 25px;
height: 2px;
background: #FFF;
transform: rotate(90deg);
}
.button:after {
position: absolute;
top: 20px;
left: 9px;
content: '';
width: 25px;
height: 2px;
background: #FFF;
}
.nav {
transform: translateY(-10%);
visibility: hidden;
top: 20px;
left: -55px;
transition: all 0.5s ease-in-out;
background: #FFF;
width: 150px;
border-radius: 2px;
transform: translateY(0%);
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
}
.nav a {
text-align: center;
display: block;
margin: 15px 0;
color: #F28482;
text-decoration: none;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
}
#toggle:checked ~ .nav {
visibility: visible;
transform: translateY(10%);
}
#toggle:checked ~ .button {
transform: rotate(135deg);
box-shadow: 0 0 0 0 transparent;
}

<div class="container">
<input type="checkbox" id="toggle" />
<label class="button" for="toggle"></label>
<nav class="nav">
<a href="#" target="_blank">Home</a>
<a href="#" target="_blank">About</a>
<a href="#" target="_blank">Hire Me</a>
<a href="#" target="_blank">Subscribe</a>
</nav>
</div>

This is for other resources

• Floating Action Button aka FAB (Material Google inspired)
• Material Design floating action button for web, that really stands out
• react material floating button
• 35 Cool Floating Action Button Animations

Jikalau sobat mau dapat ide cari saja di web ini yah Free HTML, CSS and JS examples, di jamin towewew!

Bonus:

Before and After - Image Preview - CSS Paper Text - Responsively crop copy, restore onclick via slide animation - Responsive fonts - auto-scaling root font-size in pure CSS - Share Your Profile - HSL color picker - Color Stuff (CSS only) - Custom Context Menu With Toasts - CodeMirror GitHub theme with Copy to clipboard - CSS Horizontal Scrolling - Polyrize.js - Converting colors using filters - CSS sidebar toggle - Slide to Open - Split Text Slides - A Web Dev's Valentine - Text Visual - Team Cards - CSS Flip Cards - blurry hover effect 2 - Flexbox Demo - Popular Pens, Sort by Stat - Jelly Checkbox - Interactive 3D Video Thumbnail - Scrolling Pattern - SVG folding line hover effect - ruler - jQuery drawers - Push Notifications and Newsletter Signup Form with Transitions - Atom Button - Repeatable Patterns in CSS - Rings Navigation Concept - Blurry checkbox style