Big shadow menu

HTML
<div class="mm-menu"> <a href="javascript:;" class="mm-item"><span class="fa fa-pied-piper"></span></a> <a href="javascript:;" class="mm-item"><span class="fa fa-bomb"></span></a> <a href="javascript:;" class="mm-item"><span class="fa fa-gitlab"></span></a> <a href="javascript:;" class="mm-item"><span class="fa fa-instagram"></span></a> <a href="javascript:;" class="mm-item"><span class="fa fa-facebook"></span></a> </div><!--/mm-menu-->
CSS
html, body { height: 100%; position: relative; } body { margin: 0; background: radial-gradient(circle at 25% 0%, #eeeeee 10%, #aaaaaa); } .mm-menu { font-size: 1rem; position: relative; width: 22.5em; height: 4.5em; border-radius: 0.15em; background: #c4cac8; box-shadow: 0 -1px 0.3em rgba(0, 0, 34, 0.2) inset, 0 -1px 1px rgba(0, 0, 34, 0.03) inset; margin: -2.25em auto 0; top: 50%; } .mm-item > [class*="fa-"] { display: block; font-size: 2em; text-align: center; line-height: 2.25em; color: #c9c9c9; text-shadow: 0 -0.03em rgba(0, 0, 0, 0.21), 0 0.03em 0.06em rgba(255, 255, 255, 0.5); } .mm-item { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; position: relative; top: -0.25em; float: left; width: 4.5em; height: 4.5em; text-decoration: none; border-radius: 0.15em; transition: 250ms; background: linear-gradient(#f6f7f9, #d6d8dc) 0 50%; background-size: 100% 200%; } .mm-item:hover { top: -0.35em; background-position: 0 0%; } .mm-item:focus, .mm-item:active { outline: none; top: -0.15em; background-position: 0 100%; } .mm-item, .mm-item:first-of-type:focus, .mm-item:first-of-type:active, .mm-item:hover:focus + .mm-item, .mm-item:hover:active + .mm-item { box-shadow: 1px 1px 0 0 rgba(255, 255, 255, 0.15) inset, 0 0 0 0 transparent inset, 0.2em 0.2em 0.3em -0.07em rgba(255, 255, 255, 0.6) inset, -0.2em -0.3em 0.3em -0.07em rgba(0, 0, 0, 0.08) inset; } .mm-item:hover + .mm-item, .mm-item:focus, .mm-item:active { box-shadow: 0 0.3em 0.3em -0.2em rgba(255, 255, 255, 0.6) inset, 1px 0 0 0 rgba(0, 0, 0, 0.02) inset, 0.35em 0 0.3em -0.2em rgba(0, 0, 34, 0.07) inset, -0.2em -0.3em 0.3em -0.07em rgba(0, 0, 0, 0.08) inset; } .mm-item:hover + .mm-item:focus { box-shadow: 0 0.3em 0.3em -0.2em rgba(255, 255, 255, 0.6) inset, 1px 0 0 0 rgba(0, 0, 0, 0.01) inset, 0.45em 0 0.3em -0.2em rgba(0, 0, 34, 0.09) inset, -0.2em -0.3em 0.3em -0.07em rgba(0, 0, 0, 0.08) inset; } .mm-item::after, .mm-item:last-of-type::before { display: block; content: ''; position: absolute; z-index: -1; transition: 250ms; -moz-transform: rotate(-25deg); -ms-transform: rotate(-25deg); -webkit-transform: rotate(-25deg); transform: rotate(-25deg); } .mm-item::after { top: 4.7em; left: 0; width: 90.8%; height: 110%; background: linear-gradient(205deg, rgba(0, 0, 34, 0.3), rgba(255, 255, 255, 0)); -webkit-transform-origin: 0 0; transform-origin: 0 0; } .mm-item:hover::after { top: 4.8em; height: 125%; } .mm-item:focus::after, .mm-item:active::after { top: 4.6em; height: 95%; } .mm-item:last-of-type::before { top: 1px; right: 0; width: 42.4%; height: 160%; background: linear-gradient(115deg, rgba(0, 0, 34, 0.3), rgba(255, 255, 255, 0)); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; } .mm-item:last-of-type:hover::before { width: 44.4%; height: 180%; } .mm-item:last-of-type:focus::before, .mm-item:last-of-type:active::before { width: 41.4%; height: 140%; } @media screen and (-webkit-min-device-pixel-ratio: 0) { .mm-item::after { width: 91%; } } @media only screen and (height: 300px) { .mm-menu { font-size: 1.5rem; } .mm-item:nth-of-type(1) { top: -0.35em; background-position: 0 0%; } .mm-item:nth-of-type(1)::after { top: 4.8em; } .mm-item:nth-of-type(2) { box-shadow: 0 0.2em 0.3em -2px rgba(255, 255, 255, 0.6) inset, -1px -1px 0 0 rgba(0, 0, 0, 0.03) inset, 0.3em 0 0.2em -2px rgba(0, 0, 0, 0.05) inset, -0.2em -0.2em 0.3em -2px rgba(0, 0, 0, 0.08) inset; } .mm-item:nth-of-type(3) { top: -0.15em; background-position: 0 100%; box-shadow: 0 0.2em 0.3em -2px rgba(255, 255, 255, 0.6) inset, -1px -1px 0 0 rgba(0, 0, 0, 0.03) inset, 0.3em 0 0.2em -2px rgba(0, 0, 0, 0.05) inset, -0.2em -0.2em 0.3em -2px rgba(0, 0, 0, 0.08) inset; } .mm-item:nth-of-type(3)::after { top: 4.6em; } .mm-item:last-of-type::before { width: 43.4%; } }
JAVASCRIPT
Expand for more options Login