Burger icon using CSS pseudo elements - markhowellsmead/helpers GitHub Wiki

This technique allows you to use CSS3 to display a “burger” icon comprised of pure HTML elements and CSS pseudo elements. No images! Based on an original technique at tympanus.net in 2014.

HTML

<a class="is-icon burger"><span>Menu</span></a>

SCSS

The individual attributes are optional. The full mixin is here.

.is-icon.burger {
    @include css-button-menu(
        $css-button-menu-background:    transparent,
        $css-button-menu-colour:        rgb(255,0,0),
        $css-button-menu-speed:         300ms,
        $css-button-menu-linewidth:     2px,
        $css-button-menu-width:         20px,
        $css-button-menu-height:        20px
    );
}

Author

Mark Howells-Mead | www.permanenttourist.ch | Since 12th December 2014

Author

Mark Howells-Mead | https://permanenttourist.ch and https://sayhello.ch/ | Wiki since 2016

License

Use this code freely, widely and for free. Provision of this code provides and implies no guarantee.

Please respect the GPL v3 licence, which is available via http://www.gnu.org/licenses/gpl-3.0.html

⚠️ **GitHub.com Fallback** ⚠️