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

02.06.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.


Efekt pierwszy




kod CSS dla tego efektu:

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

Efekt drugi




Kod CSS dla tego efektu:

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

Efekt trzeci



Kod CSS dla tego efektu:

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

Efekt czwarty



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



Kod CSS dla tego efektu: 

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

Efekt szósty



Kod CSS dla tego efektu: 

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

Efekt siódmy



Kod CSS dla tego efektu: 

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

Efekt ósmy



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



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



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.

10 komentarzy:

  1. Świetny post i naprawdę pomocny,jak zawsze!

    OdpowiedzUsuń
  2. www.kwietniowaaa.blogspot.com3 czerwca 2016 00:11

    Trzeci, ósmy i dziesiąty są najbardziej w moim guście. Akurat jestem na etapie poszukiwań jak zmienić design bloga i przyznam, że jak już będę wprowadzać zmiany to chętnie skorzystam z tych efektów. Chyba, że zmieni mi się zamysł, bo mam w tej chwili sporo różnych pomysłów;D

    OdpowiedzUsuń
  3. siódmy, ósmy i dziesiąty to moi faworyci! ;)

    OdpowiedzUsuń
  4. Ale bajery :D Musimy kiedyś skorzystać :)

    OdpowiedzUsuń
  5. Wiesz może jak dodać posty do podstron? Proszę o pomoc, bardzo mi to potrzebne. ♥

    OdpowiedzUsuń
  6. Wystarczy poszukać http://blonparia.blogspot.com/2014/03/kategorie-wygladajace-jak-strony.html#more

    OdpowiedzUsuń
  7. Dziękuję bardzo! ♥

    OdpowiedzUsuń
  8. Ważne, aby znaleźć ten najlepszy :)

    OdpowiedzUsuń
  9. Paweł Wiśniewski10 maja 2017 20:00

    Pomożecie? Nie działa zapewne coś robię źle...

    OdpowiedzUsuń
  10. Paweł Wiśniewski10 maja 2017 20:29

    Przepraszam, działa:)

    OdpowiedzUsuń

- Komentarze takie jak: spam, obserwacja za obserwacje, prośby o klikanie w banery etc. zostają usuwane - ZAPAMIĘTAJ! MÓJ BLOG TO NIE TABLICA OGŁOSZEŃ
- Uznaje tylko konstruktywną krytykę
- Każdy komentarz to motywacja dla mnie.
- Weryfikacja obrazkowa wyłączona