Move down effect on hover with a Bootstrap button
Dev Geos

Dev Geos @dev_geos

About: Coding from some years. Trying to do original things and share it with you. Follow me 😉

Location:
Somewhere
Joined:
Aug 10, 2021

Move down effect on hover with a Bootstrap button

Publish Date: Dec 20 '22
2 0

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

Comments 0 total

    Add comment