It's All About The Gooey Effect

Berbicara mengenai effects tentu tidak akan ada habisnya. Dengan menggunakan bahasa CSS saja ada bejibun hasil yang sudah bisa kita comot secara gratis ;)) Salah satu efek paling kreatif yg memikat mata adalah The Gooey Effect. Salah seorang kreator dari gooey efek ini adalah bernama Lucas Bebber! Kalau mau membaca artikel tentang The Gooey Effect
Berikut adalah beberapa kreasi goo-ey pilihan dari web playground codepen

• Gooey toggle switch.
• Social Icon with Gooey Effect.
• Pure CSS gooey nav menu button.
• SVG Filter Gooey Share, Social Media Button.

Ada banyak sih, searching saja sendiri, try also in github ;)
Setelah gue baca dan mengamati, ternyata efek yang dihasilkan itu bisa murni menggunakan bahasa CSS, SVG, atau Script? Tergantung sobat terbiasa dengan yg mana, tinggal pilih sesuai kebutuhan! Untuk lebih jelas, silahkan sobat buka HTML Editor Playground kalian atau secara online bisa kunjungi Create a New Pen, Create a new fiddle or Live HTML Editor.

Masukan syntax HTML pada kotak HTML, kode CSS pada kotak CSS begitu jg JavaScript pd kotak script! Berikut kode awal untuk melihat bagaimana indahnya si gooey efek tercipta dengan CSS?

.blobs{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 400px;
height: 200px;
margin: auto;
background-color: #FFF;
filter: contrast(15) contrast(.5) sepia(1) brightness(1.85) hue-rotate(319deg) saturate(3.45);
overflow: hidden;
}
.blob{
background-color: #000;
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
transition: cubic-bezier(.8,0,.25,1) 1.3s;
box-shadow: 0 0 30px 10px black;
}
.blobs:hover .blob:first-child{
transform: translate(-50%, -50%) translateX (-70px);
}
.blobs:hover .blob: last-child{
transform: translate(-50%, -50%) translateX (70px);
}

<div class="blobs">
<div class="blob"></div>
<div class="blob"></div>
</div>

Salah satu creation perpaduan goo_ey efek dgn memakai SVG and jQuery SVG Filter Gooey Share, Social Media Button. By dynamicdrive you can get free code for Slide Out Social Icon Buttons. Di awal tadi salah seorang master sudah membuat Gooey Menu dengan 4 varian menggunakan CSS and SVG Filters! Sekarang AA Koben akan bagi pada kalian satu persatu ke-4 varian tersebut. Kode yg saya buat khusus untuk browser mozilla? This is my experiment bro HA...HA :))

The code is the creation of an experiment for the mozilla browser only.

Gooey Menu Version 1

.menu-item, .menu-open-button {
background: #ff4081;
border-radius: 100%;
width: 80px;
height: 80px;
margin-left: -40px;
position: absolute;
top: 20px;
color: white;
text-align: center;
line-height: 80px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform ease-out 200ms;
transition: -webkit-transform ease-out 200ms;
transition: transform ease-out 200ms;
transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}
.menu-open {
display: none;
}
.hamburger {
width: 25px;
height: 3px;
background: white;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -12.5px;
margin-top: -1.5px;
-webkit-transition: -webkit-transform 200ms;
transition: -webkit-transform 200ms;
transition: transform 200ms;
transition: transform 200ms, -webkit-transform 200ms;
}
.hamburger-1 {
-webkit-transform: translate3d(0, -8px, 0);
transform: translate3d(0, -8px, 0);
}
.hamburger-2 {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hamburger-3 {
-webkit-transform: translate3d(0, 8px, 0);
transform: translate3d(0, 8px, 0);
}
.menu-open:checked + .menu-open-button .hamburger-1 {
-webkit-transform: translate3d(0, 0, 0) rotate(45deg);
transform: translate3d(0, 0, 0) rotate(45deg);
}
.menu-open:checked + .menu-open-button .hamburger-2 {
-webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
transform: translate3d(0, 0, 0) scale(0.1, 1);
}
.menu-open:checked + .menu-open-button .hamburger-3 {
-webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
transform: translate3d(0, 0, 0) rotate(-45deg);
}
.menu {
position: absolute;
left: 50%;
margin-left: -190px;
padding-top: 20px;
padding-left: 190px;
width: 380px;
height: 250px;
box-sizing: border-box;
font-size: 20px;
text-align: left;
-webkit-filter: url("#shadowed-goo");
filter: url("#shadowed-goo");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><defs><filter id=\'shadowed-goo\'><feGaussianBlur in=\'SourceGraphic\' result=\'blur\' stdDeviation=\'10\'/><feColorMatrix in=\'blur\' mode=\'matrix\' values=\'1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7\' result=\'goo\'/><feGaussianBlur in=\'goo\' stdDeviation=\'3\' result=\'shadow\'/><feColorMatrix in=\'shadow\' mode=\'matrix\' values=\'0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 -0.2\' result=\'shadow\'/><feOffset in=\'shadow\' dx=\'1\' dy=\'1\' result=\'shadow\'/><feBlend in2=\'shadow\' in=\'goo\' result=\'goo\'/><feBlend in2=\'goo\' in=\'SourceGraphic\' result=\'mix\'/></filter></defs></svg>#shadowed-goo");
}
.menu-item:hover {
background: white;
color: #ff4081;
}
.menu-item:nth-child(3) {
-webkit-transition-duration: 70ms;
transition-duration: 70ms;
}
.menu-item:nth-child(4) {
-webkit-transition-duration: 130ms;
transition-duration: 130ms;
}
.menu-item:nth-child(5) {
-webkit-transition-duration: 190ms;
transition-duration: 190ms;
}
.menu-item:nth-child(6) {
-webkit-transition-duration: 250ms;
transition-duration: 250ms;
}
.menu-item:nth-child(7) {
-webkit-transition-duration: 310ms;
transition-duration: 310ms;
}
.menu-open-button {
z-index: 2;
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
-webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
transform: scale(1.1, 1.1) translate3d(0, 0, 0);
cursor: pointer;
}
.menu-open-button:hover {
-webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}
.menu-open:checked + .menu-open-button {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
-webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}
.menu-open:checked ~ .menu-item {
-webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}
.menu-open:checked ~ .menu-item:nth-child(3) {
-webkit-transition-duration: 160ms;
transition-duration: 160ms;
-webkit-transform: translate3d(114.42548px, 11.48084px, 0);
transform: translate3d(114.42548px, 11.48084px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(4) {
-webkit-transition-duration: 240ms;
transition-duration: 240ms;
-webkit-transform: translate3d(77.18543px, 85.2491px, 0);
transform: translate3d(77.18543px, 85.2491px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(5) {
-webkit-transition-duration: 320ms;
transition-duration: 320ms;
-webkit-transform: translate3d(0.09158px, 114.99996px, 0);
transform: translate3d(0.09158px, 114.99996px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(6) {
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
-webkit-transform: translate3d(-77.04956px, 85.37192px, 0);
transform: translate3d(-77.04956px, 85.37192px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(7) {
-webkit-transition-duration: 480ms;
transition-duration: 480ms;
-webkit-transform: translate3d(-114.40705px, 11.66307px, 0);
transform: translate3d(-114.40705px, 11.66307px, 0);
}
nav.menu a, .fa {
width:80px;
height:80px;
line-height:80px;
vertical-align:middle;
}

<nav class="menu">
<input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open"/>
<label class="menu-open-button" for="menu-open">
<span class="hamburger hamburger-1"></span>
<span class="hamburger hamburger-2"></span>
<span class="hamburger hamburger-3"></span>
</label>
<a href="#" class="menu-item"> <i class="fa fa-bar-chart"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-plus"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-heart"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-envelope"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-cog"></i> </a>
</nav>DEMO:

Gooey Menu Version 2

.menu-item, .menu-open-button {
background: #e91e63;
border-radius: 100%;
width: 80px;
height: 80px;
margin-left: -40px;
position: absolute;
top: 150px;
color: white;
text-align: center;
line-height: 80px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform ease-out 200ms;
transition: -webkit-transform ease-out 200ms;
transition: transform ease-out 200ms;
transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}
.menu-open {
display: none;
}
.hamburger {
width: 25px;
height: 3px;
background: white;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -12.5px;
margin-top: -1.5px;
-webkit-transition: -webkit-transform 200ms;
transition: -webkit-transform 200ms;
transition: transform 200ms;
transition: transform 200ms, -webkit-transform 200ms;
}
.hamburger-1 {
-webkit-transform: translate3d(0, -8px, 0);
transform: translate3d(0, -8px, 0);
}
.hamburger-2 {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hamburger-3 {
-webkit-transform: translate3d(0, 8px, 0);
transform: translate3d(0, 8px, 0);
}
.menu-open:checked + .menu-open-button .hamburger-1 {
-webkit-transform: translate3d(0, 0, 0) rotate(45deg);
transform: translate3d(0, 0, 0) rotate(45deg);
}
.menu-open:checked + .menu-open-button .hamburger-2 {
-webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
transform: translate3d(0, 0, 0) scale(0.1, 1);
}
.menu-open:checked + .menu-open-button .hamburger-3 {
-webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
transform: translate3d(0, 0, 0) rotate(-45deg);
}
.menu {
position: absolute;
left: 50%;
margin-left: -190px;
padding-top: 20px;
padding-left: 190px;
width: 380px;
height: 250px;
box-sizing: border-box;
font-size: 20px;
text-align: left;
-webkit-filter: url("#shadowed-goo");
filter: url("#shadowed-goo");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><defs><filter id=\'shadowed-goo\'><feGaussianBlur in=\'SourceGraphic\' result=\'blur\' stdDeviation=\'10\'/><feColorMatrix in=\'blur\' mode=\'matrix\' values=\'1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7\' result=\'goo\'/><feGaussianBlur in=\'goo\' stdDeviation=\'3\' result=\'shadow\'/><feColorMatrix in=\'shadow\' mode=\'matrix\' values=\'0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 -0.2\' result=\'shadow\'/><feOffset in=\'shadow\' dx=\'1\' dy=\'1\' result=\'shadow\'/><feBlend in2=\'shadow\' in=\'goo\' result=\'goo\'/><feBlend in2=\'goo\' in=\'SourceGraphic\' result=\'mix\'/></filter></defs></svg>#shadowed-goo");
}
.menu-item:hover {
background: white;
color: #e91e63;
}
.menu-item:nth-child(3) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(4) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(5) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(6) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(7) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(8) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(9) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-open-button {
z-index: 2;
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
-webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
transform: scale(1.1, 1.1) translate3d(0, 0, 0);
cursor: pointer;
}
.menu-open-button:hover {
-webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}
.menu-open:checked + .menu-open-button {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
-webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}
.menu-open:checked ~ .menu-item {
-webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}
.menu-open:checked ~ .menu-item:nth-child(3) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
-webkit-transform: translate3d(0.08361px, -104.99997px, 0);
transform: translate3d(0.08361px, -104.99997px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(4) {
-webkit-transition-duration: 280ms;
transition-duration: 280ms;
-webkit-transform: translate3d(90.9466px, -52.47586px, 0);
transform: translate3d(90.9466px, -52.47586px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(5) {
-webkit-transition-duration: 380ms;
transition-duration: 380ms;
-webkit-transform: translate3d(90.9466px, 52.47586px, 0);
transform: translate3d(90.9466px, 52.47586px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(6) {
-webkit-transition-duration: 480ms;
transition-duration: 480ms;
-webkit-transform: translate3d(0.08361px, 104.99997px, 0);
transform: translate3d(0.08361px, 104.99997px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(7) {
-webkit-transition-duration: 580ms;
transition-duration: 580ms;
-webkit-transform: translate3d(-90.86291px, 52.62064px, 0);
transform: translate3d(-90.86291px, 52.62064px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(8) {
-webkit-transition-duration: 680ms;
transition-duration: 680ms;
-webkit-transform: translate3d(-91.03006px, -52.33095px, 0);
transform: translate3d(-91.03006px, -52.33095px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(9) {
-webkit-transition-duration: 780ms;
transition-duration: 780ms;
-webkit-transform: translate3d(-0.25084px, -104.9997px, 0);
transform: translate3d(-0.25084px, -104.9997px, 0);
}
nav.menu a, .fa {
width:80px;
height:80px;
line-height:80px;
vertical-align:middle;
}

<nav class="menu">
<input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open"/>
<label class="menu-open-button" for="menu-open">
<span class="hamburger hamburger-1"></span>
<span class="hamburger hamburger-2"></span>
<span class="hamburger hamburger-3"></span>
</label>
<a href="#" class="menu-item"> <i class="fa fa-bar-chart"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-plus"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-heart"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-envelope"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-cog"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-ellipsis-h"></i> </a>
</nav>DEMO:

Gooey Menu Version 3

.menu-item, .menu-open-button {
background: #00bcd4;
border-radius: 100%;
width: 80px;
height: 80px;
margin-left: -40px;
position: absolute;
top: 20px;
color: white;
text-align: center;
line-height: 80px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform ease-out 200ms;
transition: -webkit-transform ease-out 200ms;
transition: transform ease-out 200ms;
transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}
.menu-open {
display: none;
}
.hamburger {
width: 25px;
height: 3px;
background: white;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -12.5px;
margin-top: -1.5px;
-webkit-transition: -webkit-transform 200ms;
transition: -webkit-transform 200ms;
transition: transform 200ms;
transition: transform 200ms, -webkit-transform 200ms;
}
.hamburger-1 {
-webkit-transform: translate3d(0, -8px, 0);
transform: translate3d(0, -8px, 0);
}
.hamburger-2 {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hamburger-3 {
-webkit-transform: translate3d(0, 8px, 0);
transform: translate3d(0, 8px, 0);
}
.menu-open:checked + .menu-open-button .hamburger-1 {
-webkit-transform: translate3d(0, 0, 0) rotate(45deg);
transform: translate3d(0, 0, 0) rotate(45deg);
}
.menu-open:checked + .menu-open-button .hamburger-2 {
-webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
transform: translate3d(0, 0, 0) scale(0.1, 1);
}
.menu-open:checked + .menu-open-button .hamburger-3 {
-webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
transform: translate3d(0, 0, 0) rotate(-45deg);
}
.menu {
position: absolute;
left: 7%;
margin-left: -80px;
padding-top: 20px;
padding-left: 80px;
width: 650px;
height: 150px;
box-sizing: border-box;
font-size: 20px;
text-align: left;
-webkit-filter: url("#shadowed-goo");
filter: url("#shadowed-goo");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><defs><filter id=\'shadowed-goo\'><feGaussianBlur in=\'SourceGraphic\' result=\'blur\' stdDeviation=\'10\'/><feColorMatrix in=\'blur\' mode=\'matrix\' values=\'1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7\' result=\'goo\'/><feGaussianBlur in=\'goo\' stdDeviation=\'3\' result=\'shadow\'/><feColorMatrix in=\'shadow\' mode=\'matrix\' values=\'0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 -0.2\' result=\'shadow\'/><feOffset in=\'shadow\' dx=\'1\' dy=\'1\' result=\'shadow\'/><feBlend in2=\'shadow\' in=\'goo\' result=\'goo\'/><feBlend in2=\'goo\' in=\'SourceGraphic\' result=\'mix\'/></filter></defs></svg>#shadowed-goo");
}
.menu-item:hover {
background: white;
color: #00bcd4;
}
.menu-item:nth-child(3) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(4) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(5) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(6) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-open-button {
z-index: 2;
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
-webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
transform: scale(1.1, 1.1) translate3d(0, 0, 0);
cursor: pointer;
}
.menu-open-button:hover {
-webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}
.menu-open:checked + .menu-open-button {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
-webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}
.menu-open:checked ~ .menu-item {
-webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.menu-open:checked ~ .menu-item:nth-child(3) {
-webkit-transition-duration: 190ms;
transition-duration: 190ms;
-webkit-transform: translate3d(110px, 0, 0);
transform: translate3d(110px, 0, 0);
}
.menu-open:checked ~ .menu-item:nth-child(4) {
-webkit-transition-duration: 290ms;
transition-duration: 290ms;
-webkit-transform: translate3d(220px, 0, 0);
transform: translate3d(220px, 0, 0);
}
.menu-open:checked ~ .menu-item:nth-child(5) {
-webkit-transition-duration: 390ms;
transition-duration: 390ms;
-webkit-transform: translate3d(330px, 0, 0);
transform: translate3d(330px, 0, 0);
}
.menu-open:checked ~ .menu-item:nth-child(6) {
-webkit-transition-duration: 490ms;
transition-duration: 490ms;
-webkit-transform: translate3d(440px, 0, 0);
transform: translate3d(440px, 0, 0);
}
nav.menu a, .fa {
width:80px;
height:80px;
line-height:80px;
vertical-align:middle;
}

<nav class="menu">
<input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open"/>
<label class="menu-open-button" for="menu-open">
<span class="hamburger hamburger-1"></span>
<span class="hamburger hamburger-2"></span>
<span class="hamburger hamburger-3"></span>
</label>
<a href="#" class="menu-item"> <i class="fa fa-bar-chart"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-plus"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-heart"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-envelope"></i> </a>
</nav>DEMO:

Gooey Menu Version 4

.menu-item, .menu-open-button {
background: #ffc107;
border-radius: 100%;
width: 80px;
height: 80px;
margin-left: -40px;
position: absolute;
top: 20px;
color: white;
text-align: center;
line-height: 80px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform ease-out 200ms;
transition: -webkit-transform ease-out 200ms;
transition: transform ease-out 200ms;
transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}
.menu-open {
display: none;
}
.hamburger {
width: 25px;
height: 3px;
background: white;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -12.5px;
margin-top: -1.5px;
-webkit-transition: -webkit-transform 200ms;
transition: -webkit-transform 200ms;
transition: transform 200ms;
transition: transform 200ms, -webkit-transform 200ms;
}
.hamburger-1 {
-webkit-transform: translate3d(0, -8px, 0);
transform: translate3d(0, -8px, 0);
}
.hamburger-2 {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hamburger-3 {
-webkit-transform: translate3d(0, 8px, 0);
transform: translate3d(0, 8px, 0);
}
.menu-open:checked + .menu-open-button .hamburger-1 {
-webkit-transform: translate3d(0, 0, 0) rotate(45deg);
transform: translate3d(0, 0, 0) rotate(45deg);
}
.menu-open:checked + .menu-open-button .hamburger-2 {
-webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
transform: translate3d(0, 0, 0) scale(0.1, 1);
}
.menu-open:checked + .menu-open-button .hamburger-3 {
-webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
transform: translate3d(0, 0, 0) rotate(-45deg);
}
.menu {
position: absolute;
left: 7%;
margin-left: -80px;
padding-top: 20px;
padding-left: 80px;
width: 650px;
height: 150px;
box-sizing: border-box;
font-size: 20px;
text-align: left;
-webkit-filter: url("#shadowed-goo");
filter: url("#shadowed-goo");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><defs><filter id=\'shadowed-goo\'><feGaussianBlur in=\'SourceGraphic\' result=\'blur\' stdDeviation=\'10\'/><feColorMatrix in=\'blur\' mode=\'matrix\' values=\'1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7\' result=\'goo\'/><feGaussianBlur in=\'goo\' stdDeviation=\'3\' result=\'shadow\'/><feColorMatrix in=\'shadow\' mode=\'matrix\' values=\'0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 -0.2\' result=\'shadow\'/><feOffset in=\'shadow\' dx=\'1\' dy=\'1\' result=\'shadow\'/><feBlend in2=\'shadow\' in=\'goo\' result=\'goo\'/><feBlend in2=\'goo\' in=\'SourceGraphic\' result=\'mix\'/></filter></defs></svg>#shadowed-goo");
}
.menu-item:hover {
background: white;
color: #ffc107;
}
.menu-item:nth-child(3) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(4) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(5) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(6) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-open-button {
z-index: 2;
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
-webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
transform: scale(1.1, 1.1) translate3d(0, 0, 0);
cursor: pointer;
}
.menu-open-button:hover {
-webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}
.menu-open:checked + .menu-open-button {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
-webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}
.menu-open:checked ~ .menu-item {
-webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.menu-open:checked ~ .menu-item:nth-child(3) {
-webkit-transition-duration: 170ms;
transition-duration: 170ms;
-webkit-transform: translate3d(80px, 0, 0);
transform: translate3d(80px, 0, 0);
}
.menu-open:checked ~ .menu-item:nth-child(4) {
-webkit-transition-duration: 250ms;
transition-duration: 250ms;
-webkit-transform: translate3d(160px, 0, 0);
transform: translate3d(160px, 0, 0);
}
.menu-open:checked ~ .menu-item:nth-child(5) {
-webkit-transition-duration: 330ms;
transition-duration: 330ms;
-webkit-transform: translate3d(240px, 0, 0);
transform: translate3d(240px, 0, 0);
}
.menu-open:checked ~ .menu-item:nth-child(6) {
-webkit-transition-duration: 410ms;
transition-duration: 410ms;
-webkit-transform: translate3d(320px, 0, 0);
transform: translate3d(320px, 0, 0);
}
nav.menu a, .fa {
width:80px;
height:80px;
line-height:80px;
vertical-align:middle;
}

<nav class="menu">
<input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open"/>
<label class="menu-open-button" for="menu-open">
<span class="hamburger hamburger-1"></span>
<span class="hamburger hamburger-2"></span>
<span class="hamburger hamburger-3"></span>
</label>
<a href="#" class="menu-item"> <i class="fa fa-bar-chart"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-plus"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-heart"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-envelope"></i> </a>
</nav>DEMO:

For fun

CSS3 Keyframes Animation Link Style - Animated Search Box - What is Clojure - Wavy Walrus & the Carpenter - Floating Social Buttons (Font Awesome) - Asana Style Buttons - Flat Buttons' Psuedo Striped Shadows - Styled file input - Laser Text animation - Header Resize on Scroll Simple Page Layout - CSS 3 Icons - Panels - Button with orbit #1 - Split fractured text - Kata - Simple gallery - Ordered List Hacks - What does a developer share? - Text Rotater - Simple toggle - Border-Image : SVG - Split Screen - CSS Text animation - floating button wants to be clicked - Magazine Template - Destination magazine - CSS only 3D paper fold text effect - Gradient Buttons with Background-Color Change (CSS-only) - Open menu effect | Pure CSS - Emoji as a cursor - Cascading text effects 📶✍️🤓 - File Dropper - ASCII art - Fading text with CSS blend modes - Pure CSS Responsive Flexbox Navigation - PX to EM calculator - Bokeh Pattern - 3D Magazine flip preview in CSS - Draggable Menu Icon - CSS3 Social buttons vol.1 - Numscrubber.js - Quick CSS3 tooltips (No images, no js) - Stacked Cards Hover Effects - Vue.js Border Radius Generator

Bye :-h