DEV Community

Dev Geos
Dev Geos

Posted on • Edited on

Quickly customize and anime a Bootstrap button (1)

One of the things that bootstrap is often criticized for is the fact that websites based on its components all look very similar. When you want to go fast or avoid writing CSS/SASS, it's mission impossible.

MOD-CSS is a lightweight framework that allows you to quickly customize your Bootstrap components.

For example, We'll quickly apply a custom background-color and a rounding effect of the edges on hover.
Rounding edge on hover

<button class="btn btn-danger" 
  :box="bg[#BE123C] && hover:bg[#F43F5E] br[2rem]">Hover-me
</button>

Enter fullscreen mode Exit fullscreen mode

Preview on codepen here

What is MOD-CSS ?

It a utility-first designed to be a lightweight alternative to Bootstrap and Tailwind.

Mod-css.com
Github

Top comments (0)