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.

GIF

HTML code

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

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