1.0.1 • Public • Published


    Create Bootstrap button variants in Javascript.

    Bootstrap button variants
    Maintained by Mindspun.

    Live Demo


    From CDN

    <script src=""></script>

    As a module

    const bs = require('bootstrap-js-buttons');

    Quick Start

    bs.buttonVariant('.btn-accent-solid', '#FF1A75');
    bs.buttonOutlineVariant('.btn-accent-outline', '#FF1A75');


    Defining additional button styles in Bootstrap requires you to use a SASS mixin, which you can only do at build time. This makes changing buttons at runtime impossible and prevents common use cases like letting a user choose their accent color. Worse, you can't use CSS custom properties for the colors since the SASS mixins won't work. Defining the buttons in Javascript solves this and let's you redefine the style whenever a color changes.

    How it works

    Each call to one of the button functions generates an associated <style> tag that is added to the head element of the document. Calling the function again with the same name replaces any previous styles so to update a given button variant, just call the function again.


    There are two main functions corresponding to the SASS mixins button-variant and button-outline-variant.

    buttonVariant(name, background, border, options)

    buttonOutlineVariant(name, color, options)


    Each function takes an optional options parameter. Options correspond to SASS variables in Bootstrap. In other words, what you'd modify in _variables.scss for Bootstrap you pass as options in Javascript. The names are the same, just translated to CamelCase. Below are the options and their associated default values.

    colorContrastLight = '#ffffff';
    colorContrastDark = '#000000';
    minContrastRatio = 4.5;
    btnHoverBgShadeAmount = 15;
    btnHoverBgTintAmount = 15;
    btnHoverBorderShadeAmount = 20;
    btnHoverBorderTintAmount = 10;
    btnActiveBgShadeAmount = 20;
    btnActiveBgTintAmount = 20;
    btnActiveBorderShadeAmount = 25;
    btnActiveBorderTintAmount = 10;
    btnBoxShadow = `inset 0 1px 0 ${rgba('#ffffff', .15)}, 0 1px 1px ${rgba('#000000', .075)} !default`;
    btnActiveBoxShadow = `inset 0 3px 5px ${rgba('#000000', .125)}`;
    enableGradients = false;
    enableShadows = false;


    npm i bootstrap-js-buttons

    DownloadsWeekly Downloads






    Unpacked Size

    102 kB

    Total Files


    Last publish


    • mindspun