• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Po najechaniu kursorem na przycisk - zmiana koloru z dołu do góry (hover)

Aruba Cloud - Virtual Private Server VPS
0 głosów
3,547 wizyt
pytanie zadane 12 czerwca 2017 w HTML i CSS przez Krzysiek_34 Mądrala (6,350 p.)
zamknięte 13 czerwca 2017 przez Krzysiek_34
Witam.

Czy istnieje możliwość, aby po najechaniu kursorem na przycisk, nastąpiła zmiana koloru z dołu do góry? Zmiana koloru ma nastąpić z dołu do góry z normalną szybkością, aby można było zobaczyć ten efekt. Najczęściej zmiana koloru (hover) następuje od razu po najechaniu kursorem na przycisk. Kiedyś na jakiejś stronie widziałem taki bajer, ale niestety nie pamiętam tej strony.
komentarz zamknięcia: Problem został rozwiązany.
komentarz 12 czerwca 2017 przez Shaoi Mądrala (7,020 p.)
::after?

3 odpowiedzi

+2 głosów
odpowiedź 12 czerwca 2017 przez mitelak Pasjonat (23,330 p.)

Da się :) Jest kilka sposobów:

  • użycie cienia wewnętrznego jako tło dla przycisku i zmianę jego położenia w poziomie :)
  • użycie :after i :before, które jest o tyle bardziej uniwersalne, że możemy zmieniać nie tylko kolor, a całe obrazki, ale za to dostajemy więcej kodu
  • nie próbowałem tego zrobić, ale nie wykluczam, że się da, a mianowicie użycie gradientu (chociaż możliwe że zachowa się jak zwykły kolor przechodząc fadeOut/In i nie uzyskamy efektu jaki chcemy)

Dwa pierwsze sposoby pokazałem tutaj https://codepen.io/mitelak/pen/qjNbga ;)  

komentarz 12 czerwca 2017 przez Krzysiek_34 Mądrala (6,350 p.)

Odpowiada mi drugi sposób jaki zaprezentowałeś.

Dzięki za pomoc.wink

+1 głos
odpowiedź 12 czerwca 2017 przez Alwox Gaduła (4,840 p.)
Do tego przydadzą Ci się animacje, tu masz o nich artykuł https://css-tricks.com/almanac/properties/a/animation/ Podpowiem, że jeśli dobrze zrozumiałem, to interesować Cię będzie animowanie wysokości ale zamiast niepotrzebnie komplikować z nakładaniem divów pokombinuj z pseudoklasami :before albo :after.
0 głosów
odpowiedź 12 czerwca 2017 przez Michał Kazula Pasjonat (19,540 p.)
Zmiana koloru na guziku? A guzik masz z czego? Input, button czy "a href"? Nałóż na guzik diva o zerowej wysokości. A jak złapiesz zdarzenie najechania na guzik to zmieniaj mu wysokość przez jakiś czas.
komentarz 12 czerwca 2017 przez Krzysiek_34 Mądrala (6,350 p.)

To jest guzik typu ARIA z wyświetlanymi panelami:

http://accessibility.athena-ict.com/aria/examples/tabpanel2.shtml

Po kliknięciu na "Prices" albo "Features", wyświetlają się panele, na których można umieszczać co nam się podoba.

U mnie guzik ma następujące parametry:

.tab
{
	float: left;
	margin-left: 0px;
	width: 180px;
	line-height: 35px;
	border-top-left-radius:.5em;
	border-top-right-radius:.5em;
	background-color: #C0C0C0;
	color: black;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	display: inline;
	margin-right: 8px;
}

.tab:hover
{
	background-color: #000000;
	color: white;
	cursor: pointer;
}

 

Podobne pytania

0 głosów
2 odpowiedzi 324 wizyt
pytanie zadane 8 stycznia 2017 w HTML i CSS przez Krzysiek_34 Mądrala (6,350 p.)
0 głosów
3 odpowiedzi 1,761 wizyt
0 głosów
1 odpowiedź 1,543 wizyt
pytanie zadane 24 stycznia 2018 w HTML i CSS przez Nocomentor Początkujący (250 p.)

93,329 zapytań

142,323 odpowiedzi

322,400 komentarzy

62,662 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...