Jak zrobić ciekawe efekty dla linków po najechaniu na nie myszą (hover)

czwartek, 2 czerwca 2016

Fani instrukcji i CSSa - ten wpis jest dla Was. Wiem, że przez pewien czas instrukcji nie było, ale przydaje się trochę "oddechu" na blogu, bo wiecie, jakbym znowu zawaliła Was instrukcjami, to później w mailach między słowami dajecie mi do zrozumienia, że jednak jest tego za dużo. Przejdźmy jednak do rzeczy. W dzisiejszym wpisie, chce Wam przedstawić ciekawe efekty dla linków czyli efekt hover czyli efekt, który będzie widoczny po najechaniu na dany link myszką. Mam nadzieję, że każdy zrozumiał o co chodzi.

Żeby dodać kod CSS musimy przejść do szablon - dostosuj - zaawansowane - dodaj arkusz CSS.
Pamiętajcie, że to nie będą podane efekty, dla konkretnego elementu na blogu, dlatego w miejscu gdzie ma być nasz selektor będzie napis "selektor", który trzeba podmienić np. na selektor dla stron.

SPIS SELEKTORÓW

Efekt pierwszy

Zobacz jaki mam efekt (najedź na mnie myszką)

kod CSS dla tego efektu:

.selektor a:hover {
border-bottom: 5px solid  #e06666 !important;
color: #e06666 !important;
}

Efekt drugi

Zobacz jaki mam efekt (najedź na mnie myszką)

Kod CSS dla tego efektu:

.selektor a:hover {box-shadow: inset 300px 0 0 #e06666;
transition: all 1s;
color: #fff;
padding: 10px;}

Efekt trzeci

Zobacz jaki mam efekt (najedź na mnie myszką)

Kod CSS dla tego efektu:

.selektor a:hover {text-shadow: 3px 0 0 #e06666;
transition: all 1s;
padding: 10px;}

Efekt czwarty

Zobacz jaki mam efekt (najedź na mnie myszką)

Kod CSS dla tego efektu: 

.selektor a:hover {box-shadow: inset 0 300px 0 #e06666;
transition: all 1s;
color: #fff;
padding: 10px;}

Efekt piąty

Zobacz jaki mam efekt (najedź na mnie myszką)

Kod CSS dla tego efektu: 

.selektor a:hover {padding: 10px; color: #fff; box-shadow: inset 1px 1px 10px #fff; background:#e06666;}

Efekt szósty

Zobacz jaki mam efekt (najedź na mnie myszką)

Kod CSS dla tego efektu: 

.selektor a:hover {
text-shadow: 0 3px 0 #e06666;
transition: all 1s;
padding: 10px;
}

Efekt siódmy

Zobacz jaki mam efekt (najedź na mnie myszką)

Kod CSS dla tego efektu: 

.selektor a:hover {
border: solid 5px #e06666;
padding: 10px;
}

Efekt ósmy

Zobacz jaki mam efekt (najedź na mnie myszką)

Kod CSS dla tego efektu:

.selektor a:hover {color: #e06666;}
.selektor a::before,
.selektor a::after {
display: inline-block;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
-moz-transition: -moz-transform 0.3s, opacity 0.2s;
transition: transform 0.3s, opacity 0.2s;
}
.selektor a::before {
margin-right: 10px;
content: '[';
color: #e06666;
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
transform: translateX(20px);
}
.selektor a::after {
margin-left: 10px;
content: ']';
color: #e06666;
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
transform: translateX(-20px);
}
.selektor a:hover::before,
.selektor a:hover::after,
.selektor a:focus::before,
.selektor a:focus::after {
opacity: 1;
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
transform: translateX(0px);
}

Efekt dziewiąty

Zobacz jaki mam efekt (najedź na mnie myszką)

Kod CSS dla tego efektu:

.selektor a {
padding: 10px 20px;
}
.selektor a::before,
.selektor a::after  {
display: inline-block;
top: 0;
left: 0; width: 87%;
height: 87%;
border: 3px solid #444;
content: '';
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
}
.selektor a::after  {
border-color: #e06666;
opacity: 0;
-webkit-transform: translateY(-7px) translateX(6px);
-moz-transform: translateY(-7px) translateX(6px);
transform: translateY(-7px) translateX(6px);
}
.selektor a:hover::before,
.selektor a:focus::before {
opacity: 0;
-webkit-transform: translateY(5px) translateX(-5px);
-moz-transform: translateY(5px) translateX(-5px);
transform: translateY(5px) translateX(-5px);
}
.selektor a:hover::after,
.selektor a:focus::after  {
opacity: 1;
-webkit-transform: translateY(0px) translateX(0px);
-moz-transform: translateY(0px) translateX(0px);
transform: translateY(0px) translateX(0px);
}
.selektor a:hover {color: #e06666;}

Efekt dziesiąty

Zobacz jaki mam efekt (najedź na mnie myszką)

Kod CSS dla tego efektu: 

.selektor a:hover {border-top: solid 4px #e06666;
border-bottom: solid 4px #e06666;
color: #e06666;
padding: 10px;}

Wszystkie pogrubione wartości są zmienne.

Jeśli spodobał Ci się wpis, przekaż go dalej :)