Collection of hand-picked free HTML and CSS link effect code examples with :hover and :active state. Aggiornamento della collezione di febbraio 2019. 4 nuovi articoli.
- CSS Breadcrumbs
- CSS Arrows
Autore
- Katherine Kato
- Novembre 4, 2019
Links
- demo e codice
Fatto con
- HTML / CSS (SCSS)
Codice
Link Fill on Hover
Effetto hover che riempie un link con una sottolineatura o una lineautilizzando CSS transitions e la proprietà clip-path.
Browser compatibili: Chrome, Edge, Firefox, Opera, Safari
Responsive: sì
Dipendenze: –
Autore
- Eina O
- Aprile 10, 2019
Links
- demo e codice
Fatto con
- HTML / CSS
Codice
Effetto link underline
Effetto link underline/border animato. Modifica transform-origin per cambiare dove inizia l’animazione. Attualmente è impostato a sinistra.
Browser compatibili: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dipendenze: –
Autore
- Christopher Kirk-Nielsen
- March 27, 2019
Links
- demo e codice
Fatto con
- HTML / CSS
Su un codice
Half-trasparente CurrentColor Link Underline
Browser compatibili: Chrome, Edge, Firefox, Opera, Safari
Responsive: sì
Dipendenze: –
Autore
- Mark
- March 5, 2019
Links
- demo e codice
Fatto con
- HTML (Pug) / CSS (SCSS)
Circa un codice
Spring/Bounce Hover Effect
Browser compatibili: Chrome, Edge, Firefox, Opera, Safari
Responsive: sì
Dipendenze: –
Autore
- Sil van Diepen
- 11 dicembre, 2018
Links
- demo e codice
Fatto con
- HTML (Pug) / CSS (SCSS)
Sul codice
Link Styling
Esplorazione dello stile dei link senza classi.
Browser compatibili: Chrome, Firefox, Opera, Safari
Dipendenze: –
Autore
- Stas Melnikov
- novembre 11, 2018
Links
- demo e codice
Fatto con
- HTML / CSS
Sul codice
Elementi interattivi
Animazioni CSS per elementi interattivi.
Browser compatibili: Chrome, Edge, Firefox, Opera, Safari
Dipendenze: r-button.css, r-link.css
Autore
- Stas Melnikov
- Il 22 ottobre, 2018
Links
- demo e codice
Fatto con
- HTML / CSS
Sul codice
Effetto link HTML e CSS
L’effetto link “Leggi tutto” in HTML e CSS.
Browser compatibili: Chrome, Edge, Firefox, Opera, Safari
Dipendenze: –
Autore
- Natalya
- 5 ottobre, 2018
Links
- demo e codice
Fatto con
- HTML / CSS (SCSS)
Sul codice
Bandiera # link!
Stili di link rotti. Flag # link con i CSS! Non dimenticare mai più a href="#" segnaposto! Chrome, Edge, Firefox, Opera, Safari
Dipendenze: –
Autore
- Geoff Graham
- 24 agosto, 2018
Links
- demo e codice
Realizzato con
- HTML / CSS
Sul codice
Effetto link
HTML e CSS effetto squiggle.
Browser compatibili: Chrome, Edge, Firefox, Opera, Safari
Dipendenze: –
Autore
- Giulia Malaroda
- 28 luglio, 2018
Links
- demo e codice
Fatto con
- HTML / CSS
Circa il codice
Link con sfondo gradiente
Link con sfondo gradiente su hover.
Browser compatibili: Chrome, Edge, Firefox, Opera, Safari
Dipendenze: –
Autore
- Jesper Strange Klitgaard Christiansen
- March 17, 2018
Links
- demo e codice
Fatto con
- HTML
- CSS/SCSS
Sul codice
Peso del carattere animato su Hover
Il link sottile diventa grassetto.
Autore
- Antoinette Janus
- 15 marzo, 2018
Links
- demo e codice
Fatto con
- HTML
- CSS/SCSS
Sul codice
Multi-linea
Effetto hover di link a più linee.
Autore
- Gabrielle Wee
- 22 febbraio, 2018
Links
- demo e codice
Realizzato con
- HTML
- CSS/SCSS
Circa il codice
Link Arrow
L’idea della freccia hover.
Autore
- Colin Horn
- Agosto 17, 2017
Links
- demo e codice
Fatto con
- HTML
- CSS/SCSS
Informazioni sul codice
Animazione del gradiente di sottolineatura
Utilizzando un gradiente di sfondo css e un’animazione css, questo permette l’animazione di una sottolineatura di un link su più righe. Questo precedentemente sarebbe stato ottenuto usando gli elementi :pseudo. Tuttavia fare questo su più righe si è rivelato difficile.
Autore
- Tiago Alexandre Lopes
- Agosto 17, 2017
Links
- demo e codice
Realizzato con
- HTML
- CSS
Sul codice
Effetto Hover Cool con mix-blend-mode
Questo è bello perché non è necessario cambiare il colore del link su :hover. Il mix-blend-mode nel ::after lo invertirà per voi.
Underline Hover
HTML e CSS effetto underline hover.
Fatto da Elwin van den Hazel
12 luglio 2017
Animate Underline Wavy
Quella bella sottolineatura ondulata che piace alla gente.
Made by David Darnes
July 10, 2017
Fancy Text-Shadow Link Underline
HTML e CSS fancy text-shadow link underline.
Fatto da Ryan
1 luglio 2017
Follow Along Links
Passa sui link e segue il cursore, evidenziando i link mentre vai!
Fatto da Katherine Kato
23 giugno 2017
Pure CSS Single Element Link Styles
Ispirato da cose che ho visto da Medium e altre penne di persone, ma con un ulteriore tentativo di portare qualche animazione. Attualmente limitato ad un link che è largo in totale 10000px su tutte le linee.
Fatto da Matthew Shields
24 giugno 2017
Effetto Hover Strikethrough
Effetto Hover per link. Usa solo uno pseudo-elemento sul link.
Made by Artyom
June 23, 2017
Jumping Link Hovers
Jumping link hovers con HTML e CSS.
Fatto da Bennett Feely
19 giugno 2017
Arrowed Link
Arrowed link – circle on hover (cf Google home website).
Made by Alexandre Jolly
May 21, 2017
Autore
- Sonja Strieder
- Febbraio 7, 2017
Links
- demo e codice
Realizzato con
- HTML
- CSS/SCSS
Sul codice
Animazione link
Animazione link su hover.
Autore
- Amelia Bellamy-Royds
- 2 gennaio, 2017
Links
- demo e codice
Fatto con
- HTML
- CSS
Informazioni sul codice
Links con note marginali
Un secondo tentativo di creare una versione accessibile e più completamenteversione responsive dello stile di link usato in https://thecorrespondent.com
Anchor Hover Effects
Provare alcuni effetti hover per i tag di ancoraggio nella tipografia del corpo usando pseudo elementi CSS.
Realizzato da Simon Gooder
29 maggio 2016
Autore
- Emily Hayman
- 22 dicembre, 2016
Links
- demo e codice
Fatto con
- HTML
- CSS/SCSS
Circa il codice
Link Highlight Hover/Click Effect
CSS background transition per aggiungere un effetto highlight su hover/click di un link.
Autore
- Misha Heesakkers
- 16 luglio, 2016
Links
- demo e codice
Fatto con
- HTML / CSS (PostCSS)
Sul codice
Effetti hover di sottolineatura del testo
Piccoli esperimenti con :before&:after effetti hover su elementi a linea singola.
Browser compatibili: Chrome, Edge, Firefox, Opera, Safari
Dipendenze: –
Autore
- Nicolas Udy
- June 07, 2016
Links
- demo e codice
Fatto con
- HTML
- CSS/PostCSS
Circa il codice
Freccia link
Freccia link :hover effetto.
Anchor Click Canvas Animation
I canvas sono posizionati in modo assoluto, e usano la proprietà svg css pointer-events in modo da non avere il canvas che blocca i click.
Realizzato da Nick Sheffield
3 maggio 2016
Autore
- Brenden Palmer
- 31 gennaio, 2015
Links
- demo e codice
Fatto con
- HTML
- CSS
Informazioni sul codice
Idee di collegamento (Proof Of Concept)
Idee di collegamento CSS3 interessanti.
