Skip to main content

Hover Effect & Shadow

tip

These classes can be used on any element so feel free to mix and match!

.shadow​

The class of .shadow will add a 10px purple drop shadow effect.

<button class="btn shadow bg-coral text-purple">.btn.shadow</button>

<div class="card square shadow"></div>

.hov​

The class of .hov will give a hover effect to an element of a cursor change. If combined with a .shadow, a slight movement is also added on hover.

<img class="framed star hov" src="avatar.jpeg" />

<button class="btn bg-coral text-purple shadow hov"></button>

<div class="card square hov"></div>

<div class="card square hov shadow"></div>