Ha kul med länk hover effekter

0
21

En designer som jag jobbar med var att presentera comps vid en nyligen team möte. Hon hade gjort ett fantastiskt jobb med att pussla ihop ett koncept för design system från komponenter till mönster och allt däremellan som skulle göra någon front-end utvecklare lycklig.

Men det var en teeny tiny detalj i hennes arbete som fångade mitt öga: hover state för länkar var en krumelur.

Standard (överst) och hover effekt (botten)

Va! Inte bara hade jag inte sett det innan, den tanken hade inte ens slagit mig. Visar sig att det finns gott om exempel på det på live-sajter, att den ena är De Utkast. Det var en som var genomförandet som inspirerade design.

Cool, tänkte jag. Kan vi göra något liknande en linjär gradient bakgrund eller ens en bakgrundsbild. Men! Det var inte slutet av design. Visar sig att det är animerade. Igen, från Skiss:

Skärmdump från Outline artikel (källa)

Whoa! Det är ganska vilda. Jag var inte säker på hur man ska närma sig det, ärligt talat, att animera några av mina första idéer skulle vara svårt, särskilt för cross-browser stödja.

Så, hur gjorde Konturerna göra det? Visar sig, är det SVG. Vi kan göra en snirkliga väg och animera det ganska enkelt:

Se Pennan Krumelur av Geoff Graham (@geoffgraham) på CodePen.

Men hur fungerar det med en länk? Tja, vi kan använda SVG på bakgrunden-bild egendom:

Se Pennan Krumelur av Geoff Graham (@geoffgraham) på CodePen.

Men det är ganska skit eftersom vi inte kan verkligen att animera. Vi behöver bättre värden för det. Vi kan dock inline CSS direkt på SVG-i bakgrunden-bild egendom. Vi kan inte bara kopiera och klistra in SVG-koden på hotellet, men vi kan med viss rätt kodning:

Se Pennan Krumelur av Geoff Graham (@geoffgraham) på CodePen.

Och, eftersom SVG kan innehålla sina egna stilar inom markeringen, animation kan kastas rätt där i bakgrunden-bild egendom, på samma sätt som vi skulle göra med CSS i ett HTML-dokument huvudet eller inline CSS i HTML.

Se Pennan Krumelur av Geoff Graham (@geoffgraham) på CodePen.

Vi kan styla upp det på ett lite annorlunda sätt, om vi skulle vilja:

Se Pennan Länk Effectz – Krumelur av Geoff Graham (@geoffgraham) på CodePen.

Det är inspirerande!

Jag har ingen aning om en animerad krumelur gör för en bra användarupplevelse och, ärligt talat, det är inte poängen med detta inlägg. Poängen är att Beskriva haft en kul idé med en slick CSS genomförande.

Det fick mig att tänka om andra icke-standard (kanske även okonventionella) hover styling vi kan göra med länkar. Igen, gungade åt sidan användbarhet och har en grand ol’ tid med CSS…

Gränsen till Bakgrunden Effekt

Kanske samma nedre gräns på den förvalda länken kan växa och bli full bakgrund av länken på hover:

Se Pennan Länk Effectz – Bakgrund på hover av Geoff Graham (@geoffgraham) på CodePen.

Heck, kan vi även göra något liknande horisontellt:

Se Pennan Länk Effectz – Horizotonal Bakgrund av Geoff Graham (@geoffgraham) på CodePen.

Den Skisserade Text Effekt

Låt oss band ut teckensnitt färgen och lämnar ett utkast efter.

Se Pennan Länk Effectz – Skiss på hover av Geoff Graham (@geoffgraham) på CodePen.

Den Upphöjda Texten Effekt

En annan idé är att höja den text som om den växer ut ur sidan på hover:

Se Pennan Länk Effectz Upp texten på hover av Geoff Graham (@geoffgraham) på CodePen.

Den Font-Växlare-oo Effekt

Det är så opraktiskt som det gör mig LOL, men varför inte:

Se Pennan Länk Effectz – Byta font på hover av Geoff Graham (@geoffgraham) på CodePen.

“Turn it Up, Chris” – Effekt

Ledsen, Chris. Du vet att du älskar det. ❤️

Se Pennan Länk Effectz – Turn it up, Chris! av Geoff Graham (@geoffgraham) på CodePen.

Vad kan du komma med?

Har idéer? Låt mig veta i kommentarerna och jag ska kasta ’em i CodePen samling som jag har startat.