Indented Button

A button using :before and :after to increase hit area, thus avoiding a jumpy effect.

Slowly move your cursor onto the button from above and notice how it jumps. This is because the button is moved using top when hovered on, which means the button's hit area is no longer under the cursor.

Jumpy I'm animated!

Do the same to this button and your cursor will hit a transparent :before element, which is deemed a child element of the button, thus increasing its hit area.

Not jumpy Show effect The :before element is shown in black.

Try clicking them too!