DEV Community

Dev Geos
Dev Geos

Posted on • Updated on

Move down effect on hover with a Bootstrap button

Bootstrap is often criticized for its look of his components very similar on the most website. It is therefore common to customize them with CSS.

If you want to be able to do it quickly, MOD-CSS is for you.
MOD-CSS is a lightweight framework that allows you to quickly customize your Bootstrap components.

For example, on a button, we'll quickly add a move down effect on hover.

button hover
HTML code

 <button class="btn btn-success" 
  :fx="trn[all .3s ease] && hover:trf[translateY(10px)]">
  Hover-me
</button>
Enter fullscreen mode Exit fullscreen mode

trn = transition
trf = transform

Test on codepen here

What is MOD-CSS ?

It is a utility-first and an alternative to Bootstrap and Tailwind.

Mod-css.com
Github

Top comments (0)