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

Question

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.

Comments

::after?

Answer 1

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 ;)  

Comments

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

Dzięki za pomoc.

Answer 2

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.

Answer 3

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.

Comments

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;
}