<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 id="#MAINFORM" class="container"> <div class="row"> <br/> </div> <div class="row"> <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-gift"></span> Boton</button> </div> <div class="row"> <br/> </div> <div class="row"> <button class="menu-hamburguesa-animado"> <span>toggle menu</span> </button> </div> </div>

.menu-hamburguesa-animado { display: block; position: relative; overflow: hidden; margin: 0; padding: 0; width: 50px; height: 50px; font-size: 0; text-indent: -9999px; appearance: none; box-shadow: none; border-radius: none; border: none; cursor: pointer; transition: background 0.3s; background-color: #fff; } .menu-hamburguesa-animado:hover { background-color: rgba(0,0,0,.04); } .menu-hamburguesa-animado:focus { outline: none; } .menu-hamburguesa-animado span { display: block; position: absolute; top: 25px; left: 10px; right: 10px; height: 3px; background: #4c4a49; transition: background 0s 0.3s; } .menu-hamburguesa-animado span::before, .menu-hamburguesa-animado span::after { position: absolute; display: block; left: 0; width: 100%; height: 3px; background-color: #4c4a49; content: ""; transition-duration: 0.3s, 0.3s; transition-delay: 0.3s, 0s; } .menu-hamburguesa-animado span::before { top: -10px; transition-property: top, transform; } .menu-hamburguesa-animado span::after { bottom: -10px; transition-property: bottom, transform; } .menu-hamburguesa-animado.muestro-x span { background: none; } .menu-hamburguesa-animado.muestro-x span::before { top: 0; transform: rotate(45deg); } .menu-hamburguesa-animado.muestro-x span::after { bottom: 0; transform: rotate(-45deg); } .menu-hamburguesa-animado.muestro-x span::before, .menu-hamburguesa-animado.muestro-x span::after { transition-delay: 0s, 0.3s; }

(function() { "use strict"; var toggles = document.querySelectorAll(".menu-hamburguesa-animado"); for (var i = toggles.length - 1; i >= 0; i--) { var toggle = toggles[i]; toggleHandler(toggle); }; function toggleHandler(toggle) { toggle.addEventListener( "click", function(e) { e.preventDefault(); (this.classList.contains("muestro-x") === true) ? this.classList.remove("muestro-x") : this.classList.add("muestro-x"); }); } })();