All examples

Building blocks > Custom properties
A button with custom properties

Below is a button that is styled with CSS.

Basic example

Example code

							<button type="button">
	Buy item
</button>

<style>
html {
	--primaryColor: red;
}
button {
  border: 1px solid var(--primaryColor); 
	color: var(--primaryColor);
	font-size: 1em;
	padding: 0.5em 1em;
}
</style>

Preview

Fallback properties

We can also set fallback properties:

Example code

							<button type="button">
	Buy item
</button>

<style>
html {
	--primaryColor: red;
}
button {
	border: 1px solid var(--primaryColor, black); 
	color: var(--primaryColor, black);
	font-size: 1em;
	padding: 0.5em 1em;
}
</style>

Preview