Transition mellem to farver

Background-color transition

HTML

<button>SEND</button>

CSS

button {
	width: 120px;
	height: 48px;
	background-color: #555; 
	border-radius: 8px;	
	cursor: pointer;
	
	transition: 200ms background-color; 
	
	color: white;
}
button:hover  {
	background-color: #888; 
	
	transition: 200ms background-color;
}

IE browsersupport

transition: IE10 og frem

Gradient transition

HTML

<button>
	<div class="button_overlay">SEND</div>
</button>

CSS

#button_2, .button_overlay  {
	box-sizing: border-box;
	position: relative;
	width: 120px;
	height: 48px;
	background-color: #555; 
	border-radius: 8px;	
	
	transition: 200ms background-color; 
}
.button_overlay  {
	position:  absolute;
	z-index: 1;
	top: 0;
	left: 0;
	padding-top: 10px; /* PLACER TEXT */
	background: linear-gradient(to bottom, #DDD, transparent); 
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr=#DDDDDD, endColorstr=#00000000 )"; 
	cursor: pointer;
	text-align: center;

	color: white; 
}
#button_2:hover  {
	background-color: #888; 
	
	transition: 200ms background-color;
}

IE browsersupport

ingen farveskift ved hover pga absolute div: IE9 og tidligere

Bemærk:

Texten "SEND" skal centreres, da det øverste element er en 'div' og ikke en 'button'

Om transition

Ved hjælp af CSS3's 'transition' kan jeg skifte mellem 2 forskellige farver med en glidende overgang, når musen føres hen over elementet. Der findes en del flere tilføjelser til brugen af 'tranition' end dem der bruges i eksemplerne her på siden.

Transition browsersupport

Da 'transition' er CCS3, er der begrænset browsersupport - først fra og med Internet Explorer 10 understøttes brugen af 'transition', så i tidligere versioner af IE vil skiftet mellem farver ske med det samme uden den glidende overgang.

Hastighed

Hastigheden af farveovergangen kan styres i både sekunder og milisekunder:

Sekunder

button {	
	transition: 1s background-color; 
}

Milisekunder

button {	
	transition: 1000ms background-color; 
}

Background-color eller gradients

Valget af metode til at udføre en 'transition' afhænger af om elementet er farvelagt med en en "almindelig" background-color eller ved hjælp af 'gradient' - se forskellen på metoderne herunder.

1. Background-color transition

Skift mellem de 2 farver ved at holde musen hen over knappen - her et eksempel hvor texten "SEND" ikke behøver styling, da browseren selv centerer text for elementet 'button':

SEND

HTML

<button>SEND</button>

CSS

button {
	width: 120px;
	height: 48px;
	background-color: #555;  /* ALMINDELIG FARVE */
	border-radius: 8px;	
	cursor: pointer;
	
	transition: 200ms background-color; 
	
	color: white;
}
button:hover  {
	background-color: #888;  /* FARVESKIFT */
	
	transition: 200ms background-color;
}

2. Gradient transition

I 2015 kan ingen browsere umiddelbart lave en glidende farveovergang på elementer som er farvelagt med 'gradient' - det er derfor nødvendigt at "snyde" lidt for at opnå effekten.

Tages der udgangspunkt i eksempel 1 ovenfor, placeres der ovenpå elementet "button" et nyt element ved hjælp af 'position: absolute'. Det nye øverste element er farvelagt med en 'gradient', hvor den ene haldel har en lys farve og den anden halvdel er gennemsigtig, således at farven fra det underste element ses gennem den gennemsigtige halvdel.

Bemærk:

Texten "SEND" skal centreres, da det nye element er en 'div' og ikke en 'button'
Ingen farveskift ved hover i IE9 og tidligere da kun der kun er mouseover på det øverste layer

SEND

HTML

<button>
	<div class="button_overlay">SEND</div>
</button>

CSS

#button_2, .button_overlay  {
	box-sizing: border-box;
	position: relative;
	width: 120px;
	height: 48px;
	background-color: #555;  /* MØRK FARVE I BUNDEN */
	border-radius: 8px;	
	
	transition: 200ms background-color; 
}
.button_overlay  {
	position:  absolute;
	z-index: 1;
	top: 0;
	left: 0;
	padding-top: 10px; /* PLACER TEXT */
	background: linear-gradient(to bottom, #DDD, transparent);  /* LYS FARVE PÅ HALVDELEN I TOPPEN */
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr=#DDDDDD, endColorstr=#00000000 )"; /* IE8 og IE9 */
    cursor: pointer;
	text-align: center;

	color: white; 
}
#button_2:hover  {
	background-color: #888; /* FARVESKIFT */
	
	transition: 200ms background-color;
}