CSS Animation Link Underline

Paulund is full of premium tutorials and support to help with your development

Sign up to get full access to all tutorials.

Get Started

Login to your account

css-link-animation

In this tutorial we're going to investigate how you can use CSS animation using transition to create link effects on the hover event of the visitor. Were going to look at 4 different effects: Middle outwards Left to right Right to left Grow from Bottom .link-background{background: #2c3e50;padding: 2rem 3rem;margin-bottom: 3rem; text-align: center;} a.middle,a.left,a.right,a.bottom{ color: #FFF; position: relative; margin: 3rem; text-decoration: none;} a.middle:before { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0 . . .

Get Started