Płynna zmiana koloru wypełnienia ikony

pytanie zadane 6 czerwca 2019 w HTML i CSS przez Moras Obywatel (1,620 p.)

Cześć w jaki sposób mogę zrealizować płynne wypełnienie się ikony (np. serduszka symbolizującego dodanie czegoś do ulubionych) po najechaniu i po kliknięciu? Czy da się to zrealizować w samym css?

1	komentarz 7 czerwca 2019 przez rafal.budzis Szeryf (85,900 p.) W css jest właściwość transition ;-) myśle że tego potrzebujesz.

3 odpowiedzi

odpowiedź 7 czerwca 2019 przez thryndl Nałogowiec (30,470 p.)
wybrane 7 czerwca 2019 przez Moras

odpowiedź 6 czerwca 2019 przez kalczur Gaduła (4,320 p.)

Coś takiego?

<!DOCTYPE html>
<html lang="pl">
<head>
	<meta charset="utf-8">
	<title>a</title>

<style>
	
	#try{
		cursor: pointer;
		font-size: 60px;
		color: red;
	}
	#try:hover{
		color: blue;
	}
	#try:active{
		color: green;
	}	
</style>

</head>
<body>

<span id="try"> &#x2764; </span>

</body>
</html>

komentarz 7 czerwca 2019 przez Moras Obywatel (1,620 p.)

o właśnie coś takiego tylko, żeby się ten symbol płynnie zmieniał kolor jak na tej stronie po najechaniu https://www.toptal.com/designers/htmlarrows/symbols/

Oraz, żeby po kliknięciu pozostawał taki kolor jak po najechaniu, ale to myślę, że uda mi się zrobić w jquery.

komentarz 7 czerwca 2019 przez kalczur Gaduła (4,320 p.)

wystarczy dodać transition i zamienić active na focus

<!DOCTYPE html>
<html lang="pl">
<head>
	<meta charset="utf-8">
	<title>a</title>

<style>
	
#try{
	cursor: pointer;
	font-size: 60px;
	color: red;
	outline:none;
}
    
#try:hover{
	color: blue;
	transition: all 0.25s ease-in;
}
#try:focus{
	color: green;
	transition: color 0.5s ease;
}
</style>

</head>
<body>

 <span id="try" tabindex="0"> &#x2764; </span>

</body>
</html>