Collection of hand-picked free HTML and CSS link code code examples with :hover and :active state. Actualização da colecção de Fevereiro de 2019. 4 novos artigos.
- CSS Breadcrumbs
- Setapas do CSS
Autor
- Katherine Kato
- 4 de Novembro, 2019
Links
- demo e código
Fabricado com
- HTML / CSS (SCSS)
Sobre um código
Link Fill on Hover
Link hover efeitos que preenchem um link com um sublinhado ou linha…através da utilização de CSS transitions e o clip-path propriedade.
Navegadores compatíveis: Cromo, Bordo, Firefox, Ópera, Safari
Responsiva: sim
Dependências: –
Autor
- Eina O
- Abril 10, 2019
Links
- demo e código
Fabricado com
- HTML / CSS
Sobre um código
Efeito de ligação à linha inferior
Efeito de ligação à linha inferior/efeito de ligação à linha inferior. Editar transform-origin para alterar a forma como a animação começa. Está actualmente definido para a esquerda.
Navegadores compatíveis: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: –
Autor
- Christopher Kirk-Nielsen
- 27 de Março, 2019
Links
- demo e código
Fabricado com
- HTML / CSS
Sobre um código
Half-transparente CurrentColor Link Underline
Navegadores compatíveis: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: –
Autor
- Marca
- Março 5, 2019
Links
- demo e código
Fabricado com
- HTML (Pug) / CSS (SCSS)
Sobre um código
Efeito de mola/prémio Hover
Navegadores compatíveis: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: –
Autor
- Sil van Diepen
- dezembro 11, 2018
Links
- demo e código
Fabricado com
- HTML (Pug) / CSS (SCSS)
Sobre o código
Link Styling
Link styling exploração sem classes.
Navegadores compatíveis: Crómio, Firefox, Ópera, Safari
Dependências: –
Autor
- Stas Melnikov
- 11 de Novembro, 2018
Links
- demo e código
Fabricado com
- HTML / CSS
Sobre o código
Elementos interactivos
Animações CSS para elementos interactivos.
P>Navegadores compatíveis: Chrome, Edge, Firefox, Opera, Safari
Dependências: r-button.css, r-link.css
Autor
- Stas Melnikov
- 22 de Outubro, 2018
Links
- demo e código
Fabricado com
- HTML / CSS
Sobre o código
HTML e CSS Link Effect
O efeito link “Read more” em HTML e CSS.
Navegadores compatíveis: Chrome, Edge, Firefox, Opera, Safari
Dependências: –
Autor
- Natalya
- 5 de Outubro, 2018
Links
- demo e código
Made com
- HTML / CSS (SCSS)
Sobre o código
Flag # links!
Estilos de links quebrados. Bandeira #ligações com CSS! Nunca se esqueça a href="#"leitor de novo!
Navegadores compatíveis: Chrome, Edge, Firefox, Opera, Safari
Dependências: –
Autor
- Geoff Graham
- Agosto 24, 2018
Links
- demo e código
Made com
- HTML / CSS
Sobre o código
Efeito de ligação
HTML e efeito de rabisco de ligação CSS.
P>Navegadores compatíveis: Chrome, Edge, Firefox, Opera, Safari
Dependências: –
Autor
- Giulia Malaroda
- 28 de Julho, 2018
Links
- demo e código
Fabricado com
- HTML / CSS
Sobre o código
Link com fundo de gradiente
Link com fundo de gradiente em pairar.
P>Navegadores compatíveis: Chrome, Edge, Firefox, Opera, Safari
Dependências: –
Autor
- Jesper Strange Klitgaard Christiansen
- 17 de Março, 2018
Links
- li>demo e código/ul>
Fabricado com
- HTML
- CSS/SCSS
Sobre o código
Peso da fonte animizada em Hover
A ligação fina fica em negrito.
Autor
- Antoinette Janus
- Março 15, 2018
Links
- li>demo e código/ul>
Fabricado com
- HTML
- CSS/SCSS
Sobre o código
Multi-linha Link
Efeito de flutuação da linha Multi.
Autor
- Gabrielle Wee
- 22 de Fevereiro, 2018
Links
- li>demo e código/ul>
Made com
- HTML
- CSS/SCSS
Sobre o código
Seta de ligação
Sta de ligação
Autor
- Colin Horn
- Agosto 17, 2017
Links
- li>demo e código/ul>
Fabricado com
- HTML
- CSS/SCSS
Sobre o code
Gradient Underline Animation
Usando um gradiente de fundo css e animação css isto permite que a animação de um sublinhado de ligação seja levada através de múltiplas linhas. Isto seria conseguido anteriormente utilizando os elementos :pseudo. Contudo, fazer isto através de múltiplas linhas revelou-se complicado.
Autor
- Tiago Alexandre Lopes
- Agosto 17, 2017
Links
- demo e código
Made com
- HTML
- CSS
Sobre o código
Efeito de Hover com mistura-blend-mode
Isto é fixe porque não é necessário mudar a cor da ligação em :hover. O mix-blend-mode no ::after irá invertê-lo para si.
Underline Hover
HTML e CSS underline hover effect.
Made by Elwin van den Hazel
12 de Julho de 2017
Animate Underline Wavy
Que as pessoas gostem.
Made by David Darnes
10 de Julho de 2017
Fancy Text-Shadow Link Underline
HTML e CSS fancy text-shadow link underline.
Made by Ryan
1 de Julho de 2017
Follow Along Links
Passe nos links e siga o cursor, destacando os links à medida que avança!
Made by Katherine Kato
23 de Junho de 2017
Estilos de Ligação de Elemento Único CSS Puro
Inspirado por coisas que têm visto de canetas Médias e de outros povos, mas com uma tentativa adicional de trazer alguma animação. Actualmente limitado a uma ligação que tem no total 10000px de largura em todas as linhas.
Made by Matthew Shields
24 de Junho de 2017
Efeito de passagem de livro de cheques
Efeito de passagem de livro de cheques para links. Usar apenas um pseudo-elemento no link.
Made by Artyom
23 de Junho de 2017
Jumping Link Pula sobrevoa
Link de Salto sobrevoa com HTML e CSS.
Made by Bennett Feely
19 de Junho de 2017
Ligação com setas
Ligação com setas – círculo sobre o pairar (cf Google home website).
Made by Alexandre Jolly
May 21, 2017
Autor
- Sonja Strieder
- 7 de Fevereiro, 2017
Links
- li>demo e código/ul>
Fabricado com
- HTML
- CSS/SCSS
Sobre o código
Link Animation
Link animation on hover.
Autor
- Amelia Bellamy-Royds
- 2 de Janeiro, 2017
Links
- li>demo e código/ul>
Fabricado com
- HTML
- CSS
Sobre o código
Links com Marginalia Notes
Uma segunda tentativa para criar uma acessibilidade e mais completa-versão reactiva do estilo de ligação utilizado em https://thecorrespondent.com
Anchor Hover Effects
Testar alguns efeitos de pairar para etiquetas de ancoragem em tipografia corporal usando pseudoelementos CSS.
Made by Simon Gooder
Maio 29, 2016
Autor
- Emily Hayman
- 22 de Dezembro, 2016
Links
- li>demo e código/ul>
Fabricado com
- HTML
- CSS/SCSS
Sobre o código
Link Highlight Hover/Click Effect
CSS background transition to add a highlight effect on hover/click of a link.
Autor
- Misha Heesakkers
- Julho 16, 2016
Links
- demo e código
Fabricado com
- HTML / CSS (PostCSS)
Sobre o código
Text Underline Hover Effects
Quick experiments with :before&:after hover effects on single line elements.
Navegadores compatíveis: Chrome, Edge, Firefox, Opera, Safari
Dependências: –
Autor
- Nicolas Udy
- Junho 07, 2016
Links
- li>demo e código/ul>
Fabricado com
- HTML
- CSS/PostCSS
Sobre o código
Ligação de flecha
Ligação de flecha :hover efeito.
Anchor Click Canvas Animation
As telas são absolutamente posicionadas, e usam a propriedade svg css pointer-events para que não tenha a tela a bloquear os seus cliques.
Made by Nick Sheffield
Maio 3, 2016
Autor
- Brenden Palmer
- 31de Janeiro, 2015
Links
- li>demo e código/ul>
Fabricado com
- HTML
- CSS
Sobre o código
Link Ideas (Proof Of Concept)
Cool CSS3 link ideas.
