Basic CSS States

dabblet.css

/* Basic CSS States */

body {
	padding: 100px;
}
/* When a button is pressed, overwrite the transition property
   to remove the delay, so that we can instantly change the color */
.red:active ~ p.perm, .green:active ~ p.perm, .blue:active ~ p.perm {
	transition: color 0; 
}

.red:active ~ p {
	color: red;
}
.green:active ~ p { 
	color: green; 
}
.blue:active ~ p {
	color: blue;
}
/* The large delay prevents the color from returning to its default
   state after we've changed it with the buttons. */
p.perm {
	transition: color 0 9999999s;
}

dabblet.html

<button class="red">Red</button>
<button class="green">Green</button>
<button class="blue">Blue</button>

<p class="temp">
This text will only have the color while the button is pressed down.
</p>
<p class="perm">
This text will keep the given color even after the button is released.
<p>

settings.json

{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}