Basic CSS transition using box-shadow

Would you like to set up a cool basic transition for your buttons when the cursor is over them?

1. Create your HTML button. We have chosen the smile face character but you can use whatever you want (I normaly use Font Awesome).
2. Define your CSS transition. In our case we want a period of 0.5 seconds every time our CSS changes and a transition effect with a slow start and end (ease-in-out).

transition: all 0.5s ease-in-out;

Our CSS will change if the mouse is over the button.

i { 
    box-shadow: 0 0 0 75px #E94F37 inset;
    color: white;
}

i:hover {
    box-shadow: 0 0 0 4px #E94F37 inset;
    color:#E94F37;
}

We are filling up the element with an inner shadow (inset) and changing the font color.

Here a real example: