WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Link de pairar
1268
ledoc
Abrir no Editor
Publique Seu Código
Recomendado
21 October 2024
Entradas de um dígito com um elemento
25 June 2025
Um código de Mete
30 May 2025
Formulário de inscrição / login
HTML
Copy
Link Hover Effects TTX69
1 Link Hover Effect
2 Link Hover Effect
3 Link Hover Effect
4 Link Hover Effect
5 Link Hover Effect
6 Link Hover Effect
7 Link Hover Effect
8 Link Hover Effect
CSS
Copy
*, *:before, *:after { box-sizing: border-box; } body { width: 80%; margin: 50px auto; color: #333; font-family: "Staatliches", cursive; background: #fbb016; } body:after { content: ""; display: table; clear: both; } h2 { float: left; width: 100%; height: 44px; margin: 30px 0; line-height: 24px; text-align: center; font-weight: normal; } a, a > span { position: relative; color: inherit; text-decoration: none; line-height: 24px; } a:before, a:after, a > span:before, a > span:after { content: ""; position: absolute; transition: transform 0.5s ease; } .effect1 { padding-top: 10px; } .effect1:before { left: 0; bottom: 0; width: 100%; height: 2px; background: #e60023; transform: scaleX(0); } .effect1:hover:before { transform: scaleX(1); } .effect2 { padding: 10px; } .effect2:before, .effect2:after { left: 0; top: 0; width: 100%; height: 100%; border-style: solid; border-color: #e60023; } .effect2:before { border-width: 2px 0 2px 0; transform: scaleX(0); } .effect2:after { border-width: 0 2px 0 2px; transform: scaleY(0); } .effect2:hover:before, .effect2:hover:after { transform: scale(1, 1); } .effect3 { display: inline-block; padding-top: 10px; padding-bottom: 5px; overflow: hidden; } .effect3:before { left: 0; bottom: 0; width: 100%; height: 2px; background: #e60023; transform: translateX(-100%); } .effect3:hover:before { transform: translateX(0); } .effect4 { padding: 10px; display: inline-block; overflow: hidden; } .effect4:before, .effect4:after { left: 0; width: 100%; height: 2px; background: #e60023; } .effect4:before { bottom: 0; transform: translateX(-100%); } .effect4:after { top: 0; transform: translateX(100%); } .effect4:hover:before, .effect4:hover:after { transform: translateX(0); } .effect5 { display: inline-block; overflow: hidden; } .effect5:before, .effect5:after { right: 0; bottom: 0; background: #e60023; } .effect5:before { width: 100%; height: 2px; transform: translateX(-100%); } .effect5:after { width: 2px; height: 100%; transform: translateY(100%); } .effect5 > span { display: block; padding: 10px; } .effect5 > span:before, .effect5 > span:after { left: 0; top: 0; background: #e60023; } .effect5 > span:before { width: 100%; height: 2px; transform: translateX(100%); } .effect5 > span:after { width: 2px; height: 100%; transform: translateY(-100%); } .effect5:hover:before, .effect5:hover:after, .effect5:hover > span:before, .effect5:hover > span:after { transform: translate(0, 0); } .effect6 { display: inline-block; overflow: hidden; } .effect6:before, .effect6:after { right: 0; bottom: 0; background: #e60023; transition: transform 0.3s ease; } .effect6:before { width: 100%; height: 2px; transform: translateX(-100%); transition-delay: 0.9s; } .effect6:after { width: 2px; height: 100%; transform: translateY(100%); transition-delay: 0.6s; } .effect6 > span { display: block; padding: 10px; } .effect6 > span:before, .effect6 > span:after { left: 0; top: 0; background: #e60023; transition: transform 0.3s ease; } .effect6 > span:before { width: 100%; height: 2px; transform: translateX(100%); transition-delay: 0.3s; } .effect6 > span:after { width: 2px; height: 100%; transform: translateY(-100%); transition-delay: 0s; } .effect6:hover:before, .effect6:hover:after, .effect6:hover > span:before, .effect6:hover > span:after { transform: translate(0, 0); } .effect6:hover:before { transition-delay: 0s; } .effect6:hover:after { transition-delay: 0.3s; } .effect6:hover > span:before { transition-delay: 0.6s; } .effect6:hover > span:after { transition-delay: 0.9s; } .effect7 { display: inline-block; overflow: hidden; } .effect7:before { left: 0; top: 0; width: 100%; height: 100%; background: #e60023; transform: translateX(-100%); } .effect7:after { content: attr(data-content); left: 0; top: 0; width: 0; margin: 12px; color: #e60023; white-space: nowrap; overflow: hidden; transition: width 0.5s ease; } .effect7 > span { display: block; margin: 2px; padding: 10px; background: #fbb016; } .effect7:hover:before { transform: translateX(0); } .effect7:hover:after { width: calc(100% - 24px); } .effect8 { display: inline-block; overflow: hidden; } .effect8:before { left: 0; top: 0; width: 100%; height: 100%; background: #e60023; transform: translateY(-100%); } .effect8:after { content: attr(data-content); top: 0; left: 0; height: 0; margin: 12px; color: #e60023; white-space: nowrap; overflow: hidden; transition: height 0.5s ease; } .effect8 > span { display: block; margin: 2px; padding: 10px; background: #fbb016; } .effect8:hover:before { transform: translateY(0); } .effect8:hover:after { height: calc(100% - 24px); }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */