Link Arrow

Link hover arrow idea.

Made with: HTML

View Code

Gradient Underline Animation

Using a css background gradient and css animation this allows the animation of a link underline to carry across multiple lines. This previously would be achieved using the :pseudo elements. However doing this over multiple lines proved tricky.

Made with: HTML

View Code

Cool Hover Effect With Mix-Blend-Mode

This is cool because you don't need to change the color of the link on :hover. The mix-blend-mode in the ::after will invert it for you.

Made with: HTML

View Code

Css3 Keyframes Animation Link Style

Made with: HTML,CSS (SCSS)

View Code

Link Animation

Link animation on hover.

Made with: HTML

View Code

Links With Marginalia Notes

A second attempt to create an accessible and more fully-responsive version of the link style used in https://thecorrespondent.com

Made with: HTML

View Code

Link Highlight Hover/Click Effect

CSS background transition to add a highlight effect on hover/click of a link.

Made with: HTML

View Code

Text Underline Hover Effects

Quick experiments with :before & :after hover effects on single line elements.

Made with: HTML,CSS (PostCSS)

View Code

Arrow Link

Arrow link :hover effect.

Made with: HTML

View Code

Scss Link Hover Animations

Hyperlink :hover CSS animations.

Made with: HTML,CSS (SCSS)

View Code

Link Ideas (Proof Of Concept)

Cool CSS3 link ideas.

Made with: HTML

View Code