Estoy usando este ejemplo exacto en Codepen: https://codepen.io/Aislam23/pen/aKveGp como mi botón de menú.
Ahora estoy tratando de averiguar cómo mostrar la flecha primero y cuando se hace clic en el botón de menú. En el Codepen tienes el ícono del menú de hamburguesas primero y luego la flecha, lo quiero al revés.
¿Es posible?
$('.menu-btn').on('click', function(e) { e.preventDefault; $(this).toggleClass('menu-btn_active'); }); body { font-family: sans-serif; margin: 0; } .section { height: 100vh; background-color: #7b1fa2; display: flex; justify-content: center; align-items: center; } .menu-btn { display: block; width: 50px; height: 50px; background-color: #fff; border-radius: 50%; position: relative; } .menu-btn span, .menu-btn span::before, .menu-btn span::after { position: absolute; top: 50%; margin-top: -1px; left: 50%; margin-left: -10px; width: 20px; height: 2px; background-color: #222; } .menu-btn span::before, .menu-btn span::after { content: ''; display: block; transition: 0.2s; } .menu-btn span::before { transform: translateY(-5px); } .menu-btn span::after { transform: translateY(5px); } .menu-btn_active span:before { transform: rotate(-35deg); width: 10px; transform-origin: left bottom; } .menu-btn_active span:after { transform: rotate(35deg); width: 10px; transform-origin: left top; } .menu-block { display: flex; justify-content: center; align-items: center; } .menu-nav { background-color: #fff; height: 50px; } .menu-nav__link { display: inline-block; text-decoration: none; color: #fff; margin-right: 20px; } .menu-nav__link { transition: 0.5s; transform-origin: right center; transform: translateX(50%); opacity: 0; } .menu-nav__link_active { transform: translateX(0%); opacity: 1; } <div class="section"> <a href="#" class="menu-btn"> <span></span> </a> </div>Esto podría hacerse fácilmente agregando la clase menu-btn_active a a.href.
<div class="section"> <a href="#" class="menu-btn menu-btn_active"> <span></span> </a> </div>