20 modernset CSS lingi efekti (hover, auto, klikiga)

CSS lingiefektid võimaldavad luua interaktiivseid ja animeeritud linke kasutades ainult HTML-i ja CSS-i ilma JavaScriptita.

Kaasaegseid veebilehti ei ehitata enam staatiliste tekstilinkidega. 2026. aasta veebidisainis on lingid interaktiivsed UI elemendid, mis tõmbavad tähelepanu, juhivad kasutajat ja suurendavad kaasatust.

Edasijõudnud CSS lingianimatsioonidega saad luua efekte, kus lingid animeeruvad automaatselt iga paari sekundi järel, reageerivad hoverile ja annavad tagasisidet klikil. Need efektid muudavad lihtsad lingid dünaamilisteks visuaalseteks komponentideks.

Selles artiklis näitame 20 modernset CSS lingiefekti, mis sisaldavad automaatseid animatsioone, hover-interaktsioone ja klikitagasisidet. Kõik näited on tehtud puhta HTML-i ja CSS-iga.

Kui otsid inspiratsiooni oma veebilehe jaoks või soovid õppida, kuidas luua edasijõudnud CSS lingi hover-efekte, pakub see juhend praktilisi koodinäiteid ja kaasaegseid UI tehnikaid.

Interaktiivsed lingid parandavad kasutatavust, suurendavad klikimäära ja muudavad kasutajaliidese elavamaks ning premium-tasemel kogemuseks.

Mis on CSS lingiefektid?

CSS lingiefekt on visuaalne animatsioon või transformatsioon, mis rakendatakse tekstilingile. Need efektid võivad aktiveeruda automaatselt, hoveri ajal või kasutaja klikkimisel.

Erinevalt traditsioonilistest linkidest, mis muudavad ainult värvi, võivad kaasaegsed CSS animeeritud lingid sisaldada liikumist, gradient-e, glitch-efekte, kirjutamise animatsioone ja isegi osakeste-laadseid interaktsioone.

Lingiefekte kasutatakse tavaliselt:

CTA nuppudel (call-to-action)
navigatsioonimenüüdes
landing page’idel
portfoolio veebilehtedel
kaasaegsetes SaaS kasutajaliidestes

Hästi disainitud CSS lingiefektid aitavad kasutajatel koheselt tuvastada klikitavaid elemente ja parandavad interaktsiooni.

Miks kasutada animeeritud linke?

Kaasaegsed animeeritud lingid ei ole ainult visuaalne ilu. Need parandavad kasutajakogemust, juhivad tähelepanu ja suurendavad kaasatust.

Edasijõudnud lingiefektid võivad:

suurendada klikimäära (CTR)
esile tõsta olulisi tegevusi
luua premium kasutajaliidese tunde
parandada kasutatavust ja tagasisidet
muuta sinu veebileht meeldejäävamaks

Kaasaegses UI disainis ei ole lingid enam passiivsed elemendid. Need on aktiivsed komponendid, mis edastavad interaktsiooni liikumise ja visuaalse tagasiside kaudu.

CSS tehnikad lingiefektide loomiseks

Enamik CSS lingianimatsioone on ehitatud lihtsate CSS tehnikate kombinatsioonina. Loominguliselt kombineerides saab luua väga keerukaid efekte.

Levinumad tehnikad:

CSS keyframe animatsioonid
teksti gradient ja background clipping
transform (scale, translate, rotate)
opacity üleminekud
pseudoelemendid (::before ja ::after)
text-shadow ja glow efektid
clip-path animatsioonid
letter-spacing muutused

Nende tehnikate kombineerimisel saavad arendajad luua nii lihtsaid kui ka väga keerukaid interaktiivseid lingiefekte.

Soovitatud arendajatele

Testid CSS lingiefekte päris projektides?

Kinsta pakub kiiret ja arendajasõbralikku WordPress majutust koos staging keskkondade ja jõudluse optimeerimise tööriistadega.

Vaata Kinsta majutust

20 modernset lingiefekti – HTML & CSS näited

Allpool leiad 20 unikaalset lingiefekti, mis on loodud kaasaegsete veebilehtede jaoks. Iga näide sisaldab:

automaatset animatsiooni (iga paari sekundi järel)
hover-interaktsiooni
klikitagasisidet
HTML koodi
CSS stiile

Kõik näited kasutavad ainult HTML-i ja CSS-i, mis teeb need kergeks ja lihtsasti integreeritavaks igale veebilehele.

1. Cyber Beam Link

Cyber Beam Link loob futuristliku efekti, kus energialaine liigub iga paari sekundi järel läbi teksti. See muudab lingi visuaalselt dünaamiliseks ja väga tähelepanu äratavaks.

Energialaine liigub iga paari sekundi järel läbi teksti
Hoveril muutub laine paksemaks ja eredamaks
Klikil käivitub kiire “võimsusimpulsi” animatsioon

Cyber Link Effect

<a href="javascript:void(0)" class="cyber-link">
Cyber Link Effect
</a>

.cyber-link{
position:relative;
display:inline-block;
font-size:28px;
font-weight:700;
color:#fff;
text-decoration:none;
letter-spacing:1px;
overflow:hidden;
}
.cyber-link::before{
content:"";
position:absolute;
top:0;
left:-120%;
width:60%;
height:100%;
background:linear-gradient(
120deg,
transparent,
rgba(0,255,255,0.9),
rgba(0,255,255,1),
rgba(0,255,255,0.9),
transparent
);
filter:blur(6px);
animation:beamMove 4s linear infinite;
}
@keyframes beamMove{
0%{left:-120%;}
60%{left:120%;}
100%{left:120%;}
}
.cyber-link:hover::before{
animation:beamHover 1.2s linear infinite;
filter:blur(10px);
}
@keyframes beamHover{
0%{left:-120%;}
100%{left:120%;}
}
.cyber-link:active::before{
animation:beamClick 0.4s linear;
filter:blur(12px);
}
@keyframes beamClick{
0%{left:-120%;}
100%{left:120%;}
}

2. Pixel Scatter Link

Pixel Scatter Link lõhub teksti hajutatud fragmentideks ja ehitab selle seejärel uuesti üles. See loob tugeva glitch-stiilis visuaalse efekti.

Tekst laguneb fragmentideks ja taastub seejärel uuesti
Hoveril efekt peatub ja muutub stabiilseks
Klikil käivitub tugevam hajumine ja kiire taastumise animatsioon

Pixel Scatter Link

<a href="javascript:void(0)" class="scatter-link" data-text="Pixel Scatter Link">
<span>Pixel Scatter Link</span>
</a>

.scatter-demo{
padding:80px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
}
/* BASE */
.scatter-link{
position:relative;
font-size:32px;
font-weight:700;
color:#fff;
text-decoration:none;
display:inline-block;
}
/* LAYERS */
.scatter-link span{
position:relative;
display:inline-block;
}
/* FRAGMENT LAYERS */
.scatter-link::before,
.scatter-link::after{
content:attr(data-text);
position:absolute;
left:0;
top:0;
width:100%;
color:#22c55e;
opacity:0.8;
pointer-events:none;
}
/* AUTO SCATTER */
.scatter-link::before{
clip-path:polygon(0 0,100% 0,100% 45%,0 45%);
animation:scatterTop 4s infinite;
}
.scatter-link::after{
clip-path:polygon(0 55%,100% 55%,100% 100%,0 100%);
animation:scatterBottom 4s infinite;
}
@keyframes scatterTop{
0%,80%,100%{transform:translate(0,0);opacity:.8;}
20%{transform:translate(-8px,-6px);opacity:.6;}
40%{transform:translate(10px,-8px);opacity:.4;}
60%{transform:translate(-6px,-4px);opacity:.6;}
}
@keyframes scatterBottom{
0%,80%,100%{transform:translate(0,0);opacity:.8;}
20%{transform:translate(8px,6px);opacity:.6;}
40%{transform:translate(-10px,8px);opacity:.4;}
60%{transform:translate(6px,4px);opacity:.6;}
}
/* HOVER — STOP + CLEAN */
.scatter-link:hover::before,
.scatter-link:hover::after{
animation:none;
transform:translate(0,0);
opacity:0;
}
/* CLICK — HARD SCATTER */
.scatter-link:active::before{
animation:scatterClickTop .3s;
}
.scatter-link:active::after{
animation:scatterClickBottom .3s;
}
@keyframes scatterClickTop{
0%{transform:translate(0,0);}
50%{transform:translate(-20px,-15px);}
100%{transform:translate(0,0);}
}
@keyframes scatterClickBottom{
0%{transform:translate(0,0);}
50%{transform:translate(20px,15px);}
100%{transform:translate(0,0);}
}

3. Click Here Badge Pop Link

Click Here Badge Pop Link loob tähelepanu köitva märgise, mis hüppab iga paari sekundi järel lingi tagant esile. See sobib hästi CTA linkidele, mis vajavad tugevamat nähtavust.

Iga paari sekundi järel hüppab lingi tagant esile märgis
Hoveril ilmub märgis kohe nähtavale tugevama liikumisega
Klikil käivitub kiire pulseerimine ja märgise välgatus

Modern CTA Link Click Here

<a href="javascript:void(0)" class="badgepop-link">
<span class="badgepop-text">Modern CTA Link</span>
<span class="badgepop-badge">Click Here</span>
</a>

.badgepop-demo{
padding:80px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
}
.badgepop-link{
position:relative;
display:inline-block;
font-size:32px;
font-weight:700;
color:#ffffff;
text-decoration:none;
line-height:1.1;
padding:8px 0;
z-index:1;
}
.badgepop-link .badgepop-text{
position:relative;
z-index:3;
}
.badgepop-link .badgepop-badge{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%) scale(.7);
padding:8px 14px;
border-radius:999px;
background:linear-gradient(135deg,#22c55e,#06b6d4);
color:#ffffff;
font-size:11px;
font-weight:800;
letter-spacing:.12em;
text-transform:uppercase;
white-space:nowrap;
box-shadow:0 10px 24px rgba(6,182,212,.28);
opacity:0;
z-index:1;
pointer-events:none;
animation:badgePopAuto 3s ease-in-out infinite;
}
.badgepop-link::before{
content:"";
position:absolute;
left:50%;
top:50%;
width:120%;
height:160%;
transform:translate(-50%,-50%) scale(.85);
border-radius:999px;
background:radial-gradient(circle,rgba(34,197,94,.20),rgba(6,182,212,.10),transparent 70%);
opacity:0;
pointer-events:none;
z-index:0;
animation:badgeGlowAuto 3s ease-in-out infinite;
}
@keyframes badgePopAuto{
0%,78%,100%{
opacity:0;
transform:translate(-50%,-50%) scale(.7);
}
84%{
opacity:1;
transform:translate(-50%,-145%) scale(1.02);
}
90%{
opacity:1;
transform:translate(-50%,-132%) scale(1);
}
}
@keyframes badgeGlowAuto{
0%,78%,100%{
opacity:0;
transform:translate(-50%,-50%) scale(.85);
}
86%{
opacity:1;
transform:translate(-50%,-88%) scale(1.08);
}
}
.badgepop-link:hover .badgepop-badge{
animation:badgePopHover .55s ease forwards;
}
.badgepop-link:hover::before{
animation:badgeGlowHover .55s ease forwards;
}
@keyframes badgePopHover{
0%{
opacity:0;
transform:translate(-50%,-50%) scale(.7);
}
60%{
opacity:1;
transform:translate(-50%,-152%) scale(1.06);
}
100%{
opacity:1;
transform:translate(-50%,-136%) scale(1);
}
}
@keyframes badgeGlowHover{
0%{
opacity:0;
transform:translate(-50%,-50%) scale(.85);
}
100%{
opacity:1;
transform:translate(-50%,-90%) scale(1.12);
}
}
.badgepop-link:active{
transform:scale(.96);
}
.badgepop-link:active .badgepop-badge{
animation:badgePopClick .28s ease;
}
.badgepop-link:active::before{
animation:badgeGlowClick .28s ease;
}
@keyframes badgePopClick{
0%{
opacity:1;
transform:translate(-50%,-136%) scale(1);
}
50%{
opacity:1;
transform:translate(-50%,-150%) scale(1.12);
}
100%{
opacity:1;
transform:translate(-50%,-136%) scale(1);
}
}
@keyframes badgeGlowClick{
0%{
opacity:1;
transform:translate(-50%,-90%) scale(1.12);
}
50%{
opacity:1;
transform:translate(-50%,-90%) scale(1.2);
}
100%{
opacity:1;
transform:translate(-50%,-90%) scale(1.12);
}
}

4. Typewriter Reset Link

Typewriter Reset Link simuleerib realistlikku kirjutamise efekti, kus tekst kustutatakse ja kirjutatakse uuesti algusest peale.

Tekst kustutatakse ja kirjutatakse uuesti
Hoveril muutub kirjutamine kiiremaks
Klikil käivitub kirjutamise animatsioon koheselt uuesti

Typewriter Link

<a href="javascript:void(0)" class="type-link">
<span>Typewriter Link</span>
</a>

.type-demo{
padding:80px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
}
.type-link{
position:relative;
display:inline-block;
font-size:32px;
font-weight:700;
color:#ffffff;
text-decoration:none;
overflow:hidden;
}
.type-link span{
display:inline-block;
white-space:nowrap;
overflow:hidden;
border-right:2px solid #22c55e;
padding-right:6px;
animation:typeWrite 4s steps(18,end) infinite;
}
@keyframes typeWrite{
0%{width:0;}
40%{width:100%;}
60%{width:100%;}
100%{width:0;}
}
.type-link span{
animation:
typeWrite 4s steps(18,end) infinite,
cursorBlink .8s step-end infinite;
}
@keyframes cursorBlink{
0%,100%{border-color:#22c55e;}
50%{border-color:transparent;}
}
.type-link:hover span{
animation-duration:2s, .8s;
}
.type-link:active span{
animation:typeClick .6s steps(18,end), cursorBlink .6s step-end;
}
@keyframes typeClick{
0%{width:0;}
100%{width:100%;}
}

5. Broken Signal Link (Glitch)

Broken Signal Link loob digitaalse glitch-efekti, kus tekst liigub, jaguneb ja moonutub nagu katkine signaal.

Tekst glitchib ja moonutub juhuslikult
Hoveril muutub tekst täielikult puhtaks
Klikil käivitub tugev glitch + raputamise efekt

Glitch Link Effect

<a href="javascript:void(0)" class="glitch-link" data-text="Glitch Link Effect">
<span>Glitch Link Effect</span>
</a>

.glitch-demo{
padding:80px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
}
.glitch-link{
position:relative;
font-size:32px;
font-weight:700;
color:#ffffff;
text-decoration:none;
display:inline-block;
}
.glitch-link span{
position:relative;
z-index:2;
}
.glitch-link::before,
.glitch-link::after{
content:attr(data-text);
position:absolute;
left:0;
top:0;
width:100%;
overflow:hidden;
pointer-events:none;
}
.glitch-link::before{
color:#22c55e;
z-index:1;
animation:glitchTop 3s infinite;
}
.glitch-link::after{
color:#06b6d4;
z-index:0;
animation:glitchBottom 3s infinite;
}
@keyframes glitchTop{
0%,100%{transform:translate(0);}
20%{transform:translate(-2px,-2px);}
40%{transform:translate(2px,-1px);}
60%{transform:translate(-1px,2px);}
80%{transform:translate(1px,-1px);}
}
@keyframes glitchBottom{
0%,100%{transform:translate(0);}
20%{transform:translate(2px,2px);}
40%{transform:translate(-2px,1px);}
60%{transform:translate(1px,-2px);}
80%{transform:translate(-1px,1px);}
}
.glitch-link:hover::before,
.glitch-link:hover::after{
animation:none;
opacity:0;
}
.glitch-link:active{
animation:glitchShake .25s;
}
.glitch-link:active::before{
animation:glitchClickTop .25s;
}
.glitch-link:active::after{
animation:glitchClickBottom .25s;
}
@keyframes glitchShake{
0%{transform:translate(0);}
25%{transform:translate(-3px,2px);}
50%{transform:translate(3px,-2px);}
75%{transform:translate(-2px,1px);}
100%{transform:translate(0);}
}
@keyframes glitchClickTop{
0%{transform:translate(0);}
50%{transform:translate(-8px,-6px);}
100%{transform:translate(0);}
}
@keyframes glitchClickBottom{
0%{transform:translate(0);}
50%{transform:translate(8px,6px);}
100%{transform:translate(0);}
}

6. Gradient Flow Text Link

Gradient Flow Text Link loob teksti sisse pidevalt liikuvate värvidega gradient-efekti, mis annab modernse animeeritud välimuse.

Gradient liigub pidevalt läbi teksti
Hoveril muutuvad värvid intensiivsemaks ja kontrast suureneb
Klikil liigub gradient kiiresti üle teksti

Gradient Flow Link

<a href="javascript:void(0)" class="gradient-link">
Gradient Flow Link
</a>

.gradient-demo{
padding:80px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
}
.gradient-link{
font-size:34px;
font-weight:800;
text-decoration:none;
letter-spacing:1px;
background:linear-gradient(
90deg,
#22c55e,
#06b6d4,
#6366f1,
#22c55e
);
background-size:200% auto;
background-clip:text;
-webkit-background-clip:text;
color:transparent;
animation:gradientFlow 4s linear infinite;
}
@keyframes gradientFlow{
0%{background-position:0% center;}
100%{background-position:200% center;}
}
.gradient-link:hover{
background:linear-gradient(
90deg,
#4ade80,
#22d3ee,
#818cf8,
#4ade80
);
background-size:200% auto;
background-clip:text;
-webkit-background-clip:text;
color:transparent;
animation:gradientFlowHover 2s linear infinite;
}
@keyframes gradientFlowHover{
0%{background-position:0% center;}
100%{background-position:200% center;}
}
.gradient-link:active{
background-clip:text;
-webkit-background-clip:text;
color:transparent;
animation:gradientRush .6s linear;
}
@keyframes gradientRush{
0%{background-position:-200% center;}
100%{background-position:200% center;}
}

7. Neon Flicker Link

Neon Flicker Link simuleerib päris neoonsildi efekti ebastabiilse vilkumise ja tugeva glow’ga.

Link vilgub nagu neoonvalgus
Hoveril stabiliseerub ja muutub täielikult eredaks
Klikil käivitub tugev valgussähvatus

Neon Flicker Link

<a href="javascript:void(0)" class="neon-link">
Neon Flicker Link
</a>

.neon-demo{
padding:80px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
}
.neon-link{
font-size:34px;
font-weight:800;
letter-spacing:2px;
text-decoration:none;
color:#22d3ee;
position:relative;
/* glow */
text-shadow:
0 0 5px #22d3ee,
0 0 10px #22d3ee,
0 0 20px #06b6d4,
0 0 40px #06b6d4;
animation:neonFlicker 2.5s infinite;
}
@keyframes neonFlicker{
0%,18%,22%,25%,53%,57%,100%{
opacity:1;
text-shadow:
0 0 5px #22d3ee,
0 0 10px #22d3ee,
0 0 20px #06b6d4,
0 0 40px #06b6d4;
}
20%,24%,55%{
opacity:.4;
text-shadow:
0 0 2px #22d3ee,
0 0 4px #22d3ee,
0 0 8px #06b6d4;
}
}
.neon-link:hover{
animation:none;
opacity:1;
text-shadow:
0 0 6px #67e8f9,
0 0 12px #22d3ee,
0 0 30px #06b6d4,
0 0 60px #06b6d4,
0 0 100px #06b6d4;
}
.neon-link:active{
animation:neonFlash .25s ease;
}
@keyframes neonFlash{
0%{
opacity:1;
text-shadow:
0 0 5px #22d3ee,
0 0 10px #22d3ee,
0 0 20px #06b6d4;
}
50%{
opacity:1;
text-shadow:
0 0 20px #a5f3fc,
0 0 40px #67e8f9,
0 0 80px #22d3ee,
0 0 120px #06b6d4,
0 0 200px #06b6d4;
}
100%{
opacity:1;
text-shadow:
0 0 5px #22d3ee,
0 0 10px #22d3ee,
0 0 20px #06b6d4;
}
}

8. Double Text Reveal Link

Double Text Reveal Link kasutab kahte teksti kihti, kus ülemine kiht liigub eest ära ja paljastab all oleva teksti.

Ülemine tekst nihkub ja paljastab teise kihi
Hoveril on üleminek sujuv ja kontrollitud
Klikil toimub kiire tekstide vahetus

Reveal Link Reveal Link Activated Link

<a href="javascript:void(0)" class="double-link">
<span class="spacer">Reveal Link</span>
<span class="top">Reveal Link</span>
<span class="bottom">Activated Link</span>
</a>

.double-demo{
padding:80px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
}
.double-link{
position:relative;
font-size:34px;
font-weight:800;
text-decoration:none;
display:inline-block;
overflow:hidden;
}
.double-link .top{
position:absolute;
left:0;
top:0;
color:#ffffff;
transition:transform .5s ease;
}
.double-link .bottom{
position:absolute;
left:0;
top:0;
color:#22d3ee;
transform:translateY(100%);
transition:transform .5s ease;
}
.double-link:hover .top{
transform:translateY(-100%);
}
.double-link:hover .bottom{
transform:translateY(0%);
}
.double-link:active .top{
transform:translateY(-100%);
transition:.1s;
}
.double-link:active .bottom{
transform:translateY(0%);
transition:.1s;
}
.double-link .spacer{
visibility:hidden;
}

9. Electric Underline Link

Electric Underline Link loob helendava allajoone, mis liigub nagu elektrivool teksti all.

Allajoon liigub nagu elektrivool
Hoveril muutub kiiremaks ja intensiivsemaks
Klikil tekib säde ja valgussähvatus

Electric Link

<a href="javascript:void(0)" class="electric-link">
Electric Link
</a>

.electric-demo{
padding:80px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
}
.electric-link{
position:relative;
font-size:34px;
font-weight:800;
text-decoration:none;
color:#ffffff;
display:inline-block;
padding-bottom:10px;
}
.electric-link::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:100%;
height:3px;
background:linear-gradient(
90deg,
transparent,
#22d3ee,
#06b6d4,
#22d3ee,
transparent
);
background-size:200% auto;
filter:blur(1px);
animation:electricFlow 2s linear infinite;
}
@keyframes electricFlow{
0%{background-position:0% center;}
100%{background-position:200% center;}
}
.electric-link:hover::after{
height:4px;
filter:blur(2px);
animation:electricFlowHover 1s linear infinite;
}
@keyframes electricFlowHover{
0%{background-position:0% center;}
100%{background-position:200% center;}
}
.electric-link::before{
content:"";
position:absolute;
bottom:-2px;
left:0;
width:8px;
height:8px;
background:#22d3ee;
border-radius:50%;
filter:blur(2px);
animation:sparkMove 2s linear infinite;
}
@keyframes sparkMove{
0%{left:0;}
100%{left:100%;}
}
.electric-link:active::after{
animation:electricFlash .3s linear;
}
.electric-link:active::before{
animation:sparkBurst .3s linear;
}
@keyframes electricFlash{
0%{opacity:1;}
50%{opacity:.2;}
100%{opacity:1;}
}
@keyframes sparkBurst{
0%{transform:scale(1);}
50%{transform:scale(2);}
100%{transform:scale(1);}
}

10. Scan Line Link

Scan Line Link loob futuristliku skaneerimise efekti, kus helendav joon liigub korduvalt üle teksti.

Skaneerimisjoon liigub pidevalt üle teksti
Hoveril muutub eredamaks ja kiiremaks
Klikil käivitub kaks kiiret skaneerimist

Scan Line Link

<a href="javascript:void(0)" class="scan-link">
Scan Line Link
</a>

.scan-demo{
padding:80px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
}
.scan-link{
position:relative;
font-size:34px;
font-weight:800;
color:#ffffff;
text-decoration:none;
overflow:hidden;
}
.scan-link::after{
content:"";
position:absolute;
top:0;
left:-120%;
width:60%;
height:100%;
background:linear-gradient(
90deg,
transparent,
rgba(34,211,238,.9),
rgba(34,211,238,1),
rgba(34,211,238,.9),
transparent
);
filter:blur(6px);
animation:scanMove 3s linear infinite;
}
@keyframes scanMove{
0%{left:-120%;}
100%{left:120%;}
}
.scan-link:hover::after{
animation:scanHover 1.2s linear infinite;
}
.scan-link:active::after{
animation:scanDouble .5s linear;
}

11. Glow Ring Link

Glow Ring Link loob pulseeriva energiarõnga, mis laieneb lingist väljapoole nagu laine.

Pulseeriv rõngas levib lingist välja
Hoveril jääb efekt pidevalt aktiivseks
Klikil plahvatab rõngas suure jõuga väljapoole

Glow Ring Link

<a href="javascript:void(0)" class="glow-link">
Glow Ring Link
</a>

.glow-demo{
padding:80px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
}
.glow-link{
position:relative;
font-size:34px;
font-weight:800;
color:#22d3ee;
text-decoration:none;
display:inline-block;
}
.glow-link::after{
content:"";
position:absolute;
left:50%;
top:50%;
width:10px;
height:10px;
border-radius:50%;
transform:translate(-50%,-50%);
border:2px solid #22d3ee;
opacity:0;
animation:ringPulse 2.5s ease-out infinite;
}
@keyframes ringPulse{
0%{
width:10px;
height:10px;
opacity:.8;
}
70%{
width:120px;
height:120px;
opacity:0;
}
100%{
width:120px;
height:120px;
opacity:0;
}
}
.glow-link:hover::after{
animation:ringPulseHover 1.2s ease-out infinite;
opacity:1;
}
@keyframes ringPulseHover{
0%{
width:10px;
height:10px;
opacity:1;
}
70%{
width:140px;
height:140px;
opacity:0;
}
100%{
width:140px;
height:140px;
opacity:0;
}
}
.glow-link:active::after{
animation:ringExplosion .5s ease-out;
}
@keyframes ringExplosion{
0%{
width:10px;
height:10px;
opacity:1;
}
50%{
width:200px;
height:200px;
opacity:.8;
}
100%{
width:260px;
height:260px;
opacity:0;
}
}

12. Letter Wave Link

Letter Wave Link animeerib iga tähe eraldi, luues laineefekti üle kogu teksti.

Tähed liiguvad laine kujul
Hoveril muutub laine tugevamaks
Klikil liigub ripple-efekt läbi kõigi tähtede

Letter Wave Link

<a href="javascript:void(0)" class="wave-link">
<span style="--d:0s;">L</span><span style="--d:.1s;">e</span><span style="--d:.2s;">t</span><span style="--d:.3s;">t</span><span style="--d:.4s;">e</span><span style="--d:.5s;">r</span><span style="--d:.6s;">&nbsp;</span><span style="--d:.7s;">W</span><span style="--d:.8s;">a</span><span style="--d:.9s;">v</span><span style="--d:1s;">e</span><span style="--d:1.1s;">&nbsp;</span><span style="--d:1.2s;">L</span><span style="--d:1.3s;">i</span><span style="--d:1.4s;">n</span><span style="--d:1.5s;">k</span>
</a>

.wave-demo{
padding:80px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
}
.wave-link{
font-size:34px;
font-weight:800;
color:#ffffff;
text-decoration:none;
display:inline-block;
}
.wave-link span{
display:inline-block;
animation-name:waveMove;
animation-duration:2s;
animation-timing-function:ease-in-out;
animation-iteration-count:infinite;
animation-delay:var(--d);
}
@keyframes waveMove{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-6px);}
}
.wave-link:hover span{
animation-name:waveHover;
animation-duration:1.2s;
animation-timing-function:ease-in-out;
animation-iteration-count:infinite;
animation-delay:var(--d);
}
@keyframes waveHover{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-12px);}
}
.wave-link:active span{
animation-name:waveClick;
animation-duration:.6s;
animation-timing-function:ease;
animation-iteration-count:1;
animation-delay:var(--d);
}
@keyframes waveClick{
0%{transform:translateY(0);}
25%{transform:translateY(-18px);}
50%{transform:translateY(0);}
75%{transform:translateY(10px);}
100%{transform:translateY(0);}
}

13. Jumping Link

Jumping Link loob mängulise efekti, kus link hüppab kergelt nagu tal oleks energia sees.

Link teeb väikese korduva hüppe
Hoveril stabiliseerub ja peatub
Klikil käivitub põrkeefekt koos kokkusurumisega

Jumping Link

<a href="javascript:void(0)" class="jump-link">
Jumping Link
</a>

.jump-demo{
padding:80px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
}
.jump-link{
display:inline-block;
font-size:34px;
font-weight:800;
color:#ffffff;
text-decoration:none;
animation:jumpLoop 1.6s ease-in-out infinite;
}
@keyframes jumpLoop{
0%,100%{transform:translateY(0);}
40%{transform:translateY(-6px);}
60%{transform:translateY(0);}
}
.jump-link:hover{
animation:none;
transform:translateY(0);
}
.jump-link:active{
animation:jumpBounce .5s ease;
}
@keyframes jumpBounce{
0%{transform:translateY(0) scaleY(1);}
20%{transform:translateY(0) scaleY(.85);}
40%{transform:translateY(-18px) scaleY(1.05);}
60%{transform:translateY(4px) scaleY(.95);}
80%{transform:translateY(-6px) scaleY(1.02);}
100%{transform:translateY(0) scaleY(1);}
}

14. Expanding Spacing Link

Expanding Spacing Link loob dünaamilise efekti, kus tähtede vahed laienevad ja tõmbuvad kokku nagu hingamine.

Tähevahed laienevad ja taastuvad pidevalt
Hoveril muutub liikumine sujuvamaks ja kontrollitumaks
Klikil laienevad vahed tugevalt ja tõmbuvad tagasi

Spacing Link

<a href="javascript:void(0)" class="space-link">
Spacing Link
</a>

.space-demo{
padding:80px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
}
.space-link{
display:inline-block;
font-size:34px;
font-weight:800;
color:#ffffff;
text-decoration:none;
animation:spaceIdle 3s ease-in-out infinite;
}
@keyframes spaceIdle{
0%,100%{letter-spacing:0px;}
50%{letter-spacing:4px;}
}
.space-link:hover{
animation:spaceHover 1.2s ease-in-out infinite;
}
@keyframes spaceHover{
0%,100%{letter-spacing:2px;}
50%{letter-spacing:10px;}
}
.space-link:active{
animation:spaceClick .4s ease;
}
@keyframes spaceClick{
0%{letter-spacing:0px;}
50%{letter-spacing:18px;}
100%{letter-spacing:0px;}
}

15. Pulse Glow Link

Pulse Glow Link loob helendava efekti, mis pulseerib nagu pehme hingav valgus.

Glow pulseerib pidevalt
Hoveril muutub tugevamaks ja eredamaks
Klikil toimub lühike glow-plahvatus

Pulse Glow Link

<a href="javascript:void(0)" class="pulse-link">
Pulse Glow Link
</a>

.pulse-demo{
padding:80px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
}
.pulse-link{
display:inline-block;
font-size:34px;
font-weight:800;
color:#22d3ee;
text-decoration:none;
text-shadow:
0 0 4px #22d3ee,
0 0 8px #22d3ee,
0 0 16px #06b6d4;
animation:pulseGlow 2.2s ease-in-out infinite;
}
@keyframes pulseGlow{
0%,100%{
text-shadow:
0 0 4px #22d3ee,
0 0 8px #22d3ee,
0 0 16px #06b6d4;
}
50%{
text-shadow:
0 0 8px #67e8f9,
0 0 16px #22d3ee,
0 0 30px #06b6d4,
0 0 60px #06b6d4;
}
}
.pulse-link:hover{
animation:pulseGlowHover 1.2s ease-in-out infinite;
}
@keyframes pulseGlowHover{
0%,100%{
text-shadow:
0 0 8px #67e8f9,
0 0 16px #22d3ee,
0 0 30px #06b6d4;
}
50%{
text-shadow:
0 0 12px #a5f3fc,
0 0 30px #22d3ee,
0 0 60px #06b6d4,
0 0 120px #06b6d4;
}
}
.pulse-link:active{
animation:pulseBurst .3s ease;
}
@keyframes pulseBurst{
0%{
text-shadow:
0 0 4px #22d3ee,
0 0 8px #22d3ee,
0 0 16px #06b6d4;
}
50%{
text-shadow:
0 0 20px #a5f3fc,
0 0 60px #67e8f9,
0 0 120px #22d3ee,
0 0 200px #06b6d4,
0 0 300px #06b6d4;
}
100%{
text-shadow:
0 0 4px #22d3ee,
0 0 8px #22d3ee,
0 0 16px #06b6d4;
}
}

16. Split Color Link

Split Color Link loob kihilise teksti efekti, kus värvilised kihid eralduvad ja ühinevad dünaamiliselt.

Teksti kihid nihkuvad kergelt lahku
Hoveril ühinevad tagasi puhtaks tekstiks
Klikil toimub tugev lahknemine ja tagasipõrge

Split Color Link

<a href="javascript:void(0)" class="split-link" data-text="Split Color Link">
<span>Split Color Link</span>
</a>

.split-demo{
padding:80px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
}
.split-link{
position:relative;
font-size:34px;
font-weight:800;
color:#ffffff;
text-decoration:none;
display:inline-block;
}
.split-link span{
position:relative;
z-index:2;
}
.split-link::before,
.split-link::after{
content:attr(data-text);
position:absolute;
left:0;
top:0;
width:100%;
pointer-events:none;
}
.split-link::before{
color:#22d3ee;
z-index:1;
animation:splitDriftLeft 3s ease-in-out infinite;
}
.split-link::after{
color:#f472b6;
z-index:0;
animation:splitDriftRight 3s ease-in-out infinite;
}
@keyframes splitDriftLeft{
0%,100%{transform:translate(0);}
50%{transform:translate(-2px,-1px);}
}
@keyframes splitDriftRight{
0%,100%{transform:translate(0);}
50%{transform:translate(2px,1px);}
}
.split-link:hover::before,
.split-link:hover::after{
animation:none;
transform:translate(0);
opacity:0;
}
.split-link:active::before{
animation:splitClickLeft .4s ease;
}
.split-link:active::after{
animation:splitClickRight .4s ease;
}
@keyframes splitClickLeft{
0%{transform:translate(0);}
50%{transform:translate(-12px,-6px);}
100%{transform:translate(0);}
}
@keyframes splitClickRight{
0%{transform:translate(0);}
50%{transform:translate(12px,6px);}
100%{transform:translate(0);}
}

17. Shadow Drift Link

Shadow Drift Link loob ujuva varju efekti, mis liigub aeglaselt nagu sügavus ja gravitatsioon mõjutaks teksti.

Vari liigub aeglaselt ümber teksti
Hoveril muutub sügavamaks ja tugevamaks
Klikil langeb vari alla nagu gravitatsiooni mõjul

Shadow Drift Link

<a href="javascript:void(0)" class="shadow-link">
Shadow Drift Link
</a>

.shadow-demo{
padding:80px;
display:flex;
justify-content:center;
background:#f4f6fb;
border-radius:12px;
}
.shadow-link{
display:inline-block;
font-size:34px;
font-weight:800;
color:#111827;
text-decoration:none;
text-shadow:3px 3px 0 rgba(0,0,0,.25);
animation:shadowDrift 4s ease-in-out infinite;
}
@keyframes shadowDrift{
0%{text-shadow:3px 3px 0 rgba(0,0,0,.25);}
25%{text-shadow:6px 4px 4px rgba(0,0,0,.3);}
50%{text-shadow:4px 8px 6px rgba(0,0,0,.35);}
75%{text-shadow:2px 5px 4px rgba(0,0,0,.3);}
100%{text-shadow:3px 3px 0 rgba(0,0,0,.25);}
}
.shadow-link:hover{
animation:shadowHover 2s ease-in-out infinite;
}
@keyframes shadowHover{
0%{text-shadow:4px 4px 4px rgba(0,0,0,.35);}
50%{text-shadow:12px 14px 12px rgba(0,0,0,.5);}
100%{text-shadow:4px 4px 4px rgba(0,0,0,.35);}
}
.shadow-link:active{
animation:shadowDrop .4s ease;
}
@keyframes shadowDrop{
0%{text-shadow:3px 3px 0 rgba(0,0,0,.25);}
40%{text-shadow:0px 30px 20px rgba(0,0,0,.6);}
100%{text-shadow:3px 3px 0 rgba(0,0,0,.25);}
}

18. Underline Draw Link

Underline Draw Link loob animeeritud allajoone, mis joonistab end ise ja reageerib kasutaja tegevusele.

Allajoon joonistub ja kaob pidevalt
Hoveril jääb joon täielikult nähtavaks
Klikil jookseb joon kaks korda kiiresti üle

Underline Draw Link

<a href="javascript:void(0)" class="underline-link">
Underline Draw Link
</a>

.underline-demo{
padding:80px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
}
.underline-link{
position:relative;
font-size:34px;
font-weight:800;
color:#fff;
text-decoration:none;
}
.underline-link::after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:100%;
height:3px;
background:linear-gradient(90deg,#22c55e,#06b6d4,#6366f1);
transform:scaleX(0);
transform-origin:left;
animation:drawLoop 3s ease-in-out infinite;
}
@keyframes drawLoop{
0%{transform:scaleX(0);}
40%{transform:scaleX(1);}
60%{transform:scaleX(1);}
100%{transform:scaleX(0);}
}
.underline-link:hover::after{
animation:none;
transform:scaleX(1);
}
.underline-link:active::after{
animation:doubleRun .4s linear;
}
@keyframes doubleRun{
0%{transform:scaleX(0);}
25%{transform:scaleX(1);}
50%{transform:scaleX(0);}
75%{transform:scaleX(1);}
100%{transform:scaleX(0);}
}

19. Blink Fade Link

Blink Fade Link loob pehme vilkumise efekti, kus link muutub kergelt läbipaistvaks ja taastub.

Link fade’ib sisse ja välja
Hoveril muutub täielikult nähtavaks
Klikil toimub kiire vilkumise efekt

Blink Fade Link

<a href="javascript:void(0)" class="blink-link">
Blink Fade Link
</a>

.blink-demo{
padding:80px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
}
.blink-link{
font-size:34px;
font-weight:800;
color:#fff;
text-decoration:none;
animation:fadeLoop 2.5s ease-in-out infinite;
}
@keyframes fadeLoop{
0%{opacity:1;}
50%{opacity:.35;}
100%{opacity:1;}
}
.blink-link:hover{
animation:none;
opacity:1;
}
.blink-link:active{
animation:blinkFlash .35s linear;
}
@keyframes blinkFlash{
0%{opacity:1;}
15%{opacity:0;}
30%{opacity:1;}
45%{opacity:0;}
60%{opacity:1;}
75%{opacity:0;}
100%{opacity:1;}
}

20. Orbit Dot Link

Orbit Dot Link loob liikuva punkti, mis liigub ümber lingi nähtamatu kasti, mitte üle teksti.

Punkt liigub ümber lingi välisservade
Hoveril peatub lõpp-positsioonis
Klikil teeb kiire topelt ringi

Orbit Dot Link

<div class="orbit-wrap">
  <span class="orbit-dot"></span>
  <a href="#" class="orbit-link">Orbit Dot Link</a>
</div>

.orbit-demo{
padding:80px;
display:flex;
justify-content:center;
background:#020617;
border-radius:12px;
}
.orbit-wrap{
position:relative;
display:inline-block;
padding:20px 50px;
}
.orbit-link{
font-size:34px;
font-weight:800;
color:#fff;
text-decoration:none;
}
.orbit-dot{
position:absolute;
width:10px;
height:10px;
border-radius:50%;
background:#22c55e;
box-shadow:0 0 10px #22c55e,0 0 20px #22c55e;
top:0;
left:0;
animation:orbitRect 4s linear infinite;
}
@keyframes orbitRect{
0%   { top:0; left:0; }
25%  { top:0; left:calc(100% - 10px); }
50%  { top:calc(100% - 10px); left:calc(100% - 10px); }
75%  { top:calc(100% - 10px); left:0; }
100% { top:0; left:0; }
}
.orbit-wrap:hover .orbit-dot{
animation:none;
top:0;
left:calc(100% - 10px);
}
.orbit-wrap:active .orbit-dot{
animation:orbitFast .6s linear;
}
@keyframes orbitFast{
0%   { top:0; left:0; }
25%  { top:0; left:calc(100% - 10px); }
50%  { top:calc(100% - 10px); left:calc(100% - 10px); }
75%  { top:calc(100% - 10px); left:0; }
100% { top:0; left:0; }
0%   { top:0; left:0; }
25%  { top:0; left:calc(100% - 10px); }
50%  { top:calc(100% - 10px); left:calc(100% - 10px); }
75%  { top:calc(100% - 10px); left:0; }
100% { top:0; left:0; }
}

Kui sind huvitavad ka muud CSS animatsioonid ja UI efektid, vaata ka neid:

Soovid neid linkide efekte oma veebilehele?

Kui soovid lisada modernseid CSS linkide animatsioone, interaktiivseid UI elemente või täiustatud hover efekte oma veebilehele, saame need sinu jaoks valmis ehitada ja integreerida.

Vaata meie veebilehe uuendamise teenust

Parimad praktikad CSS linkide efektide kasutamisel

Kuigi CSS linkide efektid võivad oluliselt parandada veebilehe visuaali, tuleb neid kasutada läbimõeldult, et mitte kasutajat üle koormata. Eesmärk ei ole lisada animatsiooni igale poole, vaid suunata tähelepanu ja parandada kasutatavust.

Hästi disainitud animeeritud lingid peavad tunduma loomulikud, reageerivad ja sobituma ülejäänud kasutajaliidesega. Halvasti teostatud efektid võivad tekitada segadust, halvendada loetavust ja kahjustada kasutajakogemust.

CSS linkide animatsioone kasutades järgi neid põhimõtteid:

kasuta efekte ainult interaktiivsetel elementidel
väldi liigset animatsiooni kogu lehe ulatuses
hoia animatsioonid lühikesed ja reageerivad
veendu, et lingid on alati loetavad
kasuta ühtset stiili kogu UI-s
testi animatsioone nii desktopis kui mobiilis
väldi efekte, mis segavad sisu
eelista kasutatavust visuaalsele keerukusele

Kaasaegses UI disainis toimivad pehmed ja peened animatsioonid paremini kui agressiivsed efektid. Väikesed ja õigesti ajastatud liikumised loovad premium tunde ilma kasutajat koormamata.

Jõudluse nõuanne

Vajad kiiret keskkonda CSS animatsioonide testimiseks?

CSS animatsioonide ja UI efektide testimiseks on vaja kiiret majutust, staging keskkondi ja usaldusväärseid tööriistu. See on eriti oluline arendajatele ja agentuuridele, kes loovad kaasaegseid liideseid.

Vaata Kinsta majutust

KKK – CSS linkide efektid

Mis on CSS linkide efektid?

CSS linkide efektid on visuaalsed animatsioonid, mis lisatakse linkidele ainult HTML-i ja CSS-i abil. Need võivad sisaldada värvimuutusi, allajooni, liikumist, glow-efekte ja hover- või click-interaktsiooni.

Kas CSS linkide efektid vajavad JavaScripti?

Ei, enamik modernseid linkide animatsioone saab teha puhta CSS-iga. Kasutades keyframe’e, transforme ja pseudo-elemente, saab luua väga võimsaid efekte ilma JavaScriptita.

Kas animeeritud lingid aitavad SEO-le kaasa?

Jah, kui neid kasutada õigesti. CSS efektid parandavad kasutaja kaasatust ja interaktsiooni, mis toetab kaudselt SEO-d. Samas peavad lingid jääma alati loetavaks ja ligipääsetavaks.

Kas need töötavad mobiilis?

Mobiilseadmed ei toeta klassikalist hover’it, kuid paljud brauserid simuleerivad seda puudutusega. Oluline on, et sisu oleks nähtav ka ilma hoverita.

Milliseid CSS tehnikaid kasutatakse?

Levinumad tehnikad on transform, opacity, keyframes, gradients, text-shadow, clip-path ja pseudo-elementide kasutamine.

Kas CSS animatsioonid mõjutavad jõudlust?

Kui animatsioonid on õigesti optimeeritud, on mõju minimaalne. Soovitatav on kasutada GPU-kiirendusega omadusi nagu transform ja opacity.

Kus neid kasutatakse?

Animeeritud linke kasutatakse navigatsioonis, landing page’idel, CTA nuppudes, SaaS toodetes ja portfooliotes.

Kuidas valida õige efekt?

Valik sõltub disainist. Minimalistlikud lehed vajavad peeneid efekte, samas kui modernsed või tech saidid võivad kasutada julgemat animatsiooni.

Kokkuvõte

CSS linkide efektid on oluline osa kaasaegsest veebidisainist. Need muudavad lihtsad lingid interaktiivseteks elementideks, mis parandavad kasutajakogemust.

Selles artiklis vaatasime 20 modernset CSS linkide efekti, mis on tehtud ainult HTML-i ja CSS-iga.

Olgu tegemist portfoolio, SaaS toote, landing page’i või e-poega — animeeritud lingid annavad UI-le premium tunde.

Kõige olulisem on kasutada efekte strateegiliselt — selguse, kasutatavuse ja ühtsuse nimel.

Kombineeri erinevaid tehnikaid ja kohanda animatsioonid vastavalt oma brändile.

Arendaja märkus

Tahad UI efektide loomisel kiiremat workflow’d?

Kui ehitad moderne liideseid või töötad WordPress projektidega, on kiire ja stabiilne keskkond kriitilise tähtsusega.

Vaata Kinsta majutust

20 modernset CSS lingi efekti (auto, hover ja klikiga)

Artikli sisu

Mis on CSS lingiefektid?

Miks kasutada animeeritud linke?

CSS tehnikad lingiefektide loomiseks

Testid CSS lingiefekte päris projektides?

20 modernset lingiefekti – HTML & CSS näited

1. Cyber Beam Link

2. Pixel Scatter Link

3. Click Here Badge Pop Link

4. Typewriter Reset Link

5. Broken Signal Link (Glitch)

6. Gradient Flow Text Link

7. Neon Flicker Link

8. Double Text Reveal Link

9. Electric Underline Link

10. Scan Line Link

11. Glow Ring Link

12. Letter Wave Link

13. Jumping Link

14. Expanding Spacing Link

15. Pulse Glow Link

16. Split Color Link

17. Shadow Drift Link

18. Underline Draw Link

19. Blink Fade Link

20. Orbit Dot Link

Soovid neid linkide efekte oma veebilehele?

Parimad praktikad CSS linkide efektide kasutamisel

Vajad kiiret keskkonda CSS animatsioonide testimiseks?

KKK – CSS linkide efektid

Mis on CSS linkide efektid?

Kas CSS linkide efektid vajavad JavaScripti?

Kas animeeritud lingid aitavad SEO-le kaasa?

Kas need töötavad mobiilis?

Milliseid CSS tehnikaid kasutatakse?

Kas CSS animatsioonid mõjutavad jõudlust?

Kus neid kasutatakse?

Kuidas valida õige efekt?

Kokkuvõte

Tahad UI efektide loomisel kiiremat workflow’d?

Related Articles

30 CSS Image Hover Effekti (HTML + CSS) 2026

CSS laadimisanimatsioonid: 30 modernset näidet (HTML ja CSS) 2026

10 modernset CSS hamburger menüü nuppu (HTML ja CSS näited)

25 modernset CSS kaarti veebilehtedele (HTML ja CSS näited)

20 modernset CSS nuppu – hover efektid ja animatsioonid (2026)