Lift

A utility to give a slight lift effect on hovering over an element
Lift Base Behavior
Card Link Lift Example:
Card with the lift utility applied. Hover over me, and then click on me!
Button Lift Example:
Hover me! 
//- Card with lift
a(href='#!').card.lift
    .card-body
        | ...

//- Button with lift
a(href='#!').btn.btn-primary.lift
    | Button
The lift utility can be used by adding the .lift class to any element. In the above example, it is being used along with a Bootstrap card and a Bootstrap button. Since the lift utility is a hover effect, it should mostly be used with links! When a lifted item is clicked, an active styling will be applied bringing the element back to its base position.
Lift Sizing
Card Link Lift Example (Small):
Card with the lift utility applied. Hover over me, and then click on me!
Button Lift Example (Small):
Hover me! 
//- Card with lift small
a(href='#!').card.lift.lift-sm
    .card-body
        | ...

//- Button with lift small
a(href='#!').btn.btn-primary.lift.lift-sm
    | Button
Use .lift-sm along with the .lift utility to have a less significant lift effect applied to an element.