Zmiana koloru i działania linka po najechaniu kursorem – efekt hover [CSS]

Zmiana koloru linku (<a></a>), ale nie tylko stanowi jeden z podstawowych efektów, jakie występują na stronie internetowej.

Tę cechę domyślnie posiadają wszystkie linki znajdujące się na stronie. Nawet bez naszej ingerencji w kod CSS zwykły link będzie się wyróżniał i ulegał zmianą kiedy najedziemy na niego kursorem myszy. Ten odmienny wygląd jest wynikiem domyślnych ustawień przeglądarki internetowej. My jednak dzisiaj popracujemy nad zmianą tego domyślnego wyglądu i zmienimy ten ciemno niebieski (granatowy, modrakowy) link w coś ciekawszego.

Zmiana wyglądu i działania linka / odnośnika?

W tym wpisie wypróbujemy kilka ciekawych efektów polegających na zmianie koloru, tła pod linkiem. W praktyce nic skomplikowanego jednak na tyle dużo by móc wykorzystać np. do budowy przycisku. Efekty będą aktywowane po najechaniu kursorem myszy (efekt hover) dzięki czemu będziecie mogli ożywić trochę wasze strony internetowe.

Jak działa właściwość (pseudo element) :hower

Poniższe przykłady będą dość proste, ale stanową punkt wejściowy do bardziej skomplikowanych animacji. W końcu od czegoś trzeba zacząć. Jeżeli to dla ciebie za mało to w tekście umieściłam odnośniki do innych wpisów gdzie pojawiają się bardziej skomplikowane efekty na linkach, ale nie tylko.

Wzór selektora :hover

:hower{
  Własność selektora
}

Selektor ten może być dodawany do dowolnego obiektu, nie tylko linku np. do obrazka -> efekt powiększenia na obrazkach.

Przykładowa reguła dla tego selektora może zaś wyglądać tak:

div:hower{
  Własność selektora
}

Jak widać nie jest zbyt skompilowana. Jedyne co trzeba zrobić to zaraz po zwykłej regule CSS dodać po dwukropku hower.

Zmiana koloru linku po najechaniu kursorem:

Teraz kiedy omówiliśmy sobie na szybko działanie :hower trochę się nim pobawimy. Poniżej znajdziecie kilka przykładów linków, których style CSS a tym samych cechy takie właśnie jak kolor, tło ulegają zmianie po tym kiedy umieścimy na nich kursor myszy.

See the Pen by Aura (@Julka85) on CodePen.

Zmiana tła pod linkiem – kolor:

Zmiana koloru tła jest bardzo prostym efektem nie wymagającym sporej wiedzy. Efekt ten jest najczęściej spotykany w różnego typu przyciskach. Zaprezentowany niżej przykład jest jednak bardzo prosty i by wyglądał jak prawdziwy guzik musi zostać nieco zmodyfikowany.

Zmiana tła pod linkiem – obrazek:

Jako tło można także ustawić obrazek lub grafikę. Oczywiście kolor waszego linka zależy od was tak samo jak to co pod nim umieścicie.

Jeżeli interesuje cię temat umieszczania tła na stronie internetowej to więcej ciekawych informacji znajdziesz w wpisie o ustawieniu tła na stronie.

Obrazek pojawiający się po najechaniu kursorem myszy.

See the Pen show img by Aura (@Julka85) on CodePen.

Prosty przycisk:

Poniżej przykładowy przycisk z tłem gradientowym (płynnym przejście z jednego koloru w drugi)

Prosty przycisk

<a href="#" class="easybutton">Prosty przycisk</a>

a.easybutton{
  padding:5px 10px;
  border-radius: 10px;
  color: #fff;
  border:1px solid #333;
  background: #2986ce; /* Old browsers */  background: -moz-linear-gradient(top, #2986ce 0%, #7db9e8 100%); /* FF3.6-15 */  background: -webkit-linear-gradient(top, #2986ce 0%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */  background: linear-gradient(to bottom, #2986ce 0%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2986ce', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */}
a.easybutton:hover{
  background: #7db9e8; /* Old browsers */  background: -moz-linear-gradient(top, #7db9e8 0%, #2986ce 100%); /* FF3.6-15 */  background: -webkit-linear-gradient(top, #7db9e8 0%,#2986ce 100%); /* Chrome10-25,Safari5.1-6 */  background: linear-gradient(to bottom, #7db9e8 0%,#2986ce 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#2986ce',GradientType=0 ); /* IE6-9 */  text-decoration:none;
}

Jeśli chcesz wesprzeć moje działania:

Uzyskane w ten sposób fundusze będę przeznaczać na dalszy rozwój bloga (w tym różne opłaty związane z jego prowadzeniem).

Tagi:
Linki zmieniające kolor
Jak zmienić kolor anchora
link zmieniający kolor bez dreamweaver
zmiana koloru po najechaniu
hover CSS
odnośnik anchor
Zmiana koloru czcionki po najechaniu myszką