"button nav"
Bootstrap 3.0.0 Snippet by MohamedSamiKhiari

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/ksherman/pen/PwXyjQ?limit=all&page=10&q=mobile" /> <style class="cp-pen-styles">.float-nav { position: absolute; bottom: 20px; right: 20px; z-index: 2; } .float-nav > a.menu-btn { text-decoration: none; display: block; background-color: #cc3333; color: white; padding: 17px 19px 12px 19px; text-align: center; box-shadow: 2px 2px 8px #777; border-radius: 300px; } .float-nav > a.menu-btn.active { transition: background-color 250ms linear; background-color: transparent; box-shadow: none; } .float-nav > a.menu-btn.active > ul > li.line:nth-child(1) { border-width: 2px; -moz-transform: rotate(45deg) translate(4px, 6px); -ms-transform: rotate(45deg) translate(4px, 6px); -webkit-transform: rotate(45deg) translate(4px, 6px); transform: rotate(45deg) translate(4px, 6px); } .float-nav > a.menu-btn.active > ul > li.line:nth-child(2) { visibility: hidden; } .float-nav > a.menu-btn.active > ul > li.line:nth-child(3) { border-width: 2px; -moz-transform: rotate(-45deg) translate(8px, -10px); -ms-transform: rotate(-45deg) translate(8px, -10px); -webkit-transform: rotate(-45deg) translate(8px, -10px); transform: rotate(-45deg) translate(8px, -10px); } .float-nav > a.menu-btn > ul { list-style: none; padding: 0; margin: 0; } .float-nav > a.menu-btn > ul > li.line { border: 1px solid white; width: 100%; margin-bottom: 7px; -moz-transition-duration: 0.1s; -o-transition-duration: 0.1s; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; } .float-nav > a.menu-btn > .menu-txt { width: 100%; text-align: center; font-size: 12px; font-family: sans-serif; } .main-nav { display: none; opacity: 0; font-family: sans-serif; position: absolute; bottom: 20px; right: 20px; transition: opacity 250ms; } .main-nav.active { display: block; opacity: 1; transition: opacity 250ms; } .main-nav > ul { width: 100%; display: block; list-style: none; margin: 0; padding: 0; background-color: #cc3333; box-shadow: 2px 2px 8px #777; border-radius: 3px 3px 33.5px 3px; } .main-nav > ul > li > a { text-decoration: none; display: block; font-weight: 200; padding: 18px 80px 18px 18px; color: white; } .main-nav > ul > li > a:hover { font-weight: 400; } </style></head><body> <div class="float-nav"> <a href="#" class="menu-btn"> <ul> <li class="line"></li> <li class="line"></li> <li class="line"></li> </ul> <div class="menu-txt">menu</div> </a> </div> <div class="main-nav"> <ul> <li><a href="#">Degree Programs</a></li> <li><a href="#">Admissions</a></li> <li><a href="#">Alumni & Friends</a></li> <li><a href="#">Campus Community</a></li> <li><a href="#">Parents</a></li> <li><a href="#">Account Login</a></li> </ul> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script >$('.float-nav').click(function() { $('.main-nav, .menu-btn').toggleClass('active'); }); //# sourceURL=pen.js </script> </body></html>

Related: See More

Navbar With Icons
Hexa shape button
Loading Button
Material toggle button

Questions / Comments: