"button nav"
Bootstrap 3.0.0 Snippet by okrish

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class='menu closed'> <div class='messages button'></div> <div class='music button'></div> <div class='home button'></div> <div class='places button'></div> <div class='bookmark button'></div> <div class='main button'>Menu</div> </div> <script> $(".menu").mousedown(function(){ $(this).toggleClass("closed"); if($(this).hasClass("closed")) { $(".main.button").text("Menu"); } else { $(".main.button").text("Close"); } }) </script>
@import "https://fonts.googleapis.com/css?family=Alegreya+Sans:400,500"; html { background: #f8f7f2; } .menu, .button { width: 100px; height: 100px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .menu { position: fixed; top: 50px; left: 50px; -webkit-transition: -webkit-transform 1.125s cubic-bezier(0.39, 1.52, 0.46, 0.92); transition: -webkit-transform 1.125s cubic-bezier(0.39, 1.52, 0.46, 0.92); transition: transform 1.125s cubic-bezier(0.39, 1.52, 0.46, 0.92); transition: transform 1.125s cubic-bezier(0.39, 1.52, 0.46, 0.92), -webkit-transform 1.125s cubic-bezier(0.39, 1.52, 0.46, 0.92); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); -webkit-transform-origin: top left; transform-origin: top left; cursor: pointer; } .button { position: absolute; top: 0; left: 0; border-radius: 50%; mix-blend-mode: multiply; background-position: center center; background-repeat: no-repeat; background-size: 33%; font: 25px/100px Alegreya Sans, sans-serif; -webkit-transition: -webkit-transform 0.75s cubic-bezier(0.39, 1.52, 0.46, 0.92); transition: -webkit-transform 0.75s cubic-bezier(0.39, 1.52, 0.46, 0.92); transition: transform 0.75s cubic-bezier(0.39, 1.52, 0.46, 0.92); transition: transform 0.75s cubic-bezier(0.39, 1.52, 0.46, 0.92), -webkit-transform 0.75s cubic-bezier(0.39, 1.52, 0.46, 0.92); will-change: transform; } .button.closed { -webkit-transform: translate3d(0, 0, 0) !important; transform: translate3d(0, 0, 0) !important; } .main { color: #030f01; text-align: center; mix-blend-mode: normal; line-height: 100px; box-shadow: 0 0 0 5px rgba(3, 15, 1, 0.1); -webkit-transition: border-color 0.75s, color 0.75s; transition: border-color 0.75s, color 0.75s; will-change: color, border-color, background; } .closed .main { color: #f8f7f2; box-shadow: 0 0 0 5px rgba(3, 15, 1, 0); } .home { background-color: #1ba5cd; top: 0%; left: 225%; background-image: url(https://bennettfeely.com/cdpn/home.svg); -webkit-transition-duration: 0.525s; transition-duration: 0.525s; } .closed .home { -webkit-transform: translate3d(-225%, -10%, 0) rotate(-180deg); transform: translate3d(-225%, -10%, 0) rotate(-180deg); } .music { background-color: #1ab254; top: 86.10368%; left: 207.873%; background-image: url(https://bennettfeely.com/cdpn/music.svg); -webkit-transition-duration: 0.675s; transition-duration: 0.675s; } .closed .music { -webkit-transform: translate3d(-198.36244%, -89.19384%, 0) rotate(-180deg); transform: translate3d(-198.36244%, -89.19384%, 0) rotate(-180deg); } .messages { background-color: #fec72e; top: 159.09908%; left: 159.09908%; background-image: url(https://bennettfeely.com/cdpn/messages.svg); -webkit-transition-duration: 0.825s; transition-duration: 0.825s; } .closed .messages { -webkit-transform: translate3d(-153.22122%, -151.00892%, 0) rotate(-180deg); transform: translate3d(-153.22122%, -151.00892%, 0) rotate(-180deg); } .places { background-color: #fa7d39; top: 207.873%; left: 86.10368%; background-image: url(https://bennettfeely.com/cdpn/places.svg); -webkit-transition-duration: 0.975s; transition-duration: 0.975s; } .closed .places { -webkit-transform: translate3d(-91.98154%, -199.78284%, 0) rotate(-180deg); transform: translate3d(-91.98154%, -199.78284%, 0) rotate(-180deg); } .bookmark { background-color: #ee5656; top: 225%; left: 0%; background-image: url(https://bennettfeely.com/cdpn/bookmark.svg); -webkit-transition-duration: 1.125s; transition-duration: 1.125s; } .closed .bookmark { -webkit-transform: translate3d(-9.51056%, -228.09016%, 0) rotate(-180deg); transform: translate3d(-9.51056%, -228.09016%, 0) rotate(-180deg); }

Related: See More


Questions / Comments: