BUTTON PRESETS MADE WITH MOD CSS

Responsive buttons built with MOD CSS. We help you to better use MOD CSS by providing of multiple button types and effects: bordered, icons, rounded, social, floating, and much more.

We've used boxicons icons in all example.

Find below some examples of button made with MOD CSS.
To get the code snippet, click to right, on icon

Basic

Simple basic button who sets the width, height, background, text color for your website..

HTML

                            
    <button :box="h[2.2rem] w[100px] d[block] p[0 .6rem] bg[#8c11f080] bd[none] br[.3rem] tx.al[center] co[#eee]">
    Basic
    </button>

Transparent with border

Button who sets the width, height, background transparent, text color and border... for your website.

HTML

                        
    <button :box="h[2.2rem] w[200px] bg[none] bd[2px solid #8c11f080] br[.2rem] tx.al[center] co[gray]">
        Transparent with border
    </button>

Simple with hover

Button who sets background and color on hover... for your website.

HTML

                        
    <button :box="h[35px] w[200px] p[.5rem] d[block] bg[#ec10a740] bd[pink] br[.3rem] tx.al[center] co[white] 
        && hover:bg[#ec10a7] co[black]">Simple with Hover
    </button>

Square with custom cursor

Button who sets cursor: pointer on hover and change background-color.

HTML

                        
    <button :box="h[35px] p[.5rem] tx.al[center] co[#eee] d[block] bg[black] bd[gray] 
            && hover:bg.co[#202020] br[.1rem] cu[pointer]">Square with custom cursor
    </button>

Icon with animation

Button with animation effect on hover.

HTML

                        
    <button :box="h[35px] w[35px] p[.5rem] d[block] bg[#195bff] br[50%] bd[none] co[#eee] 
        && hover:co[#404040] trf[translateY(4px)]">
        <i class="bx bx-download" :box="val[text-top]"></i></button>

Icon with animation 2

Button who change value of border-radius on hover and change background-color.

HTML

                        
    <button :box="h*w[35px] bg[#7d33ff] br[50%] bd[none] tx.al[center] co[#eee] 
        && hover:br[2px] bg[blue] co[gray]">
        <i :box=" fo.sz[160%]" class="bx bx-fingerprint"></i>
    </button>

Rounded

Rounded effects with change background-color, color, border-color on hover.

HTML

                        
    <button :box="h[35px] bg[#195bff] bd[1px solid transparent] br[20px] p[0 1rem] tx.al[center] 
        && hover:bg[none] bd.co*co[#195bff] fo.sz[bolder]"> Rounded
    </button>

With shadow on hover

On hover, we set box-shadow property .

HTML

                        
    <button :box="h[2.4rem] p[0 .6rem] co[white] bg[#282c34] bd[.25px solid gray] br[8px] 
            && hover:bx.sh[0px 2px 6px 2px rgba(200, 200, 100, 0.3)]">With shadow on hover
            <i class="bx bx-download" :box="m[auto .5rem]"></i>
    </button>

Complete example

We've mixed all previous effect in one example

HTML

                        
    <button  :box="h[2.4rem] p[0 .6rem] co[white] bg[#8c11f0] bd[.25px solid purple] br[2px]
         && hover:bg[#195bff] br[20px] bd.co[lightblue]  bx.sh[0px 2px 6px 2px rgba(200, 150, 100, 0.3)]">
        Complete example
            <i class="bx bx-download" :box="m[auto .5rem] && hover:trf[translateY(.25rem)]"></i>
    </button>

Button group

If you want to set a button group, just display parent in Flex.
We've set a new class property to style each button.

HTML

                        
    // We set new classname
    <div :var=".btn-mod > *{ h[2.4rem] p[0 .6rem] co[white] bg[#8c11f0] bd.wd[0px .25px] bd.co[purple] 
                && hover:bg[#195bff] bd.co[lightblue] }"></div>
    // set class
    <div :box="d[flex]" class="btn-mod">
        <button>Button 1</button>
        <button>Button 2</button>
        <button>Button 3</button>
        <button>Button 4</button>
    </div>