Se faciliter les dégradés CSS3

Revenir au tutoriel : « Se faciliter les dégradés CSS3 ».

Cette démo n'est prévue que pour Firefox.

Pour changer de couleur de dégradé au survol et au focus pas besoin de redéfinir un dégradé. Seul la couleur pleine varie. 

button:hover,
button:focus {
	background-color:DeepPink;
}

Dégradé №1

button {
	color:#CCC;
	border:1px solid #F00;
	background-image:linear-gradient(red 0, yellow 40px);
}

Dégradé №2

button {
	background-image:linear-gradient(
			top
		,	rgba(255,255,255,.1) 0%
		,	rgba(255,255,255,.2) 50%
		,	rgba(255,255,255,.6) 100%
	);
}

Dégradé №3

button {
	background-image:linear-gradient(
			top
		,	rgba(255,255,255,.6) 0%
		,	rgba(255,255,255,.3) 50%
		,	rgba(255,255,255,.0) 51%
		,	rgba(255,255,255,.6) 100%
	);
}

Dégradé №4

button {
	background-image:linear-gradient(
			top
		,	rgba(255,255,255,.24) 0%
		,	rgba(255,255,255,.34) 12%
		,	rgba(255,255,255,.40) 25%
		,	rgba(255,255,255,.27) 39%
		,	rgba(255,255,255,.17) 50%
		,	rgba(255,255,255,.00) 51%
		,	rgba(255,255,255,.06) 60%
		,	rgba(255,255,255,.16) 76%
		,	rgba(255,255,255,.10) 91%
		,	rgba(255,255,255,.07) 100%
	)
}

Dégradé №5

button {
	background-image:radial-gradient(
			center 4em
		,	circle closest-corner
		,	rgba(255,255,255,.6) 0%
		,	rgba(255,255,255,0) 100%
	);
}

Revenir au tutoriel : « Se faciliter les dégradés CSS3 ».