Table of content

Colors & materials

Combining color and styles

	<link href="http://hipertextos.github.io/src/css/styles.css" rel="stylesheet" media="screen">
							
http://hipertextos.github.io/src/css/styles.css

Color classes (default)

.[colorname]

Sample
white

soft

soft-grey

grey

hard-grey

black

soft-yellow

yellow

soft-amber

amber

soft-orange

orange

soft-red

red

soft-granate

granate

soft-brown

brown

soft-pink

pink

soft-magenta

magenta

soft-violet

violet

soft-sky

sky

soft-blue

blue

soft-asphalt

asphalt

soft-turquoise

turquoise

soft-green

green

soft-olive

olive


Note: standalone color classes makes text unreadable.

Markup
<!-- Snippets -->
<div class="white">white</div>
<div class="soft">soft</div>
<div class="soft-grey">soft-grey</div>
<div class="grey">grey</div>
<div class="hard-grey">hard-grey</div>
<div class="black">black</div>
<div class="soft-yellow">soft-yellow</div>
<div class="yellow">yellow</div>
<div class="soft-amber">soft-amber</div>
<div class="amber">amber</div>
<div class="soft-orange">soft-orange</div>
<div class="orange">orange</div>
<div class="soft-red">soft-red</div>
<div class="red">red</div>
<div class="soft-granate">soft-granate</div>
<div class="granate">granate</div>
<div class="soft-brown">soft-brown</div>
<div class="brown">brown</div>
<div class="soft-pink">soft-pink</div>
<div class="pink">pink</div>
<div class="soft-magenta">soft-magenta</div>
<div class="magenta">magenta</div>
<div class="soft-violet">soft-violet</div>
<div class="violet">violet</div>
<div class="soft-sky">soft-sky</div>
<div class="sky">sky</div>
<div class="soft-blue">blue</div>
<div class="blue">blue</div>
<div class="soft-asphalt">soft-asphalt</div>
<div class="asphalt">asphalt</div>
<div class="soft-turquoise">soft-turquoise</div>
<div class="turquoise">turquoise</div>
<div class="soft-green">soft-green</div>
<div class="green">green</div>
<div class="soft-olive">soft-olive</div>
<div class="olive">olive</div>
								

http://hipertextos.github.io/src/css/styles.css

Color classes (Lines)

.lines + .[colorname]

Sample
white

soft

soft-grey

grey

hard-grey

black

soft-yellow

yellow

soft-amber

amber

soft-orange

orange

soft-red

red

soft-granate

granate

soft-brown

brown

soft-pink

pink

soft-magenta

magenta

soft-violet

violet

soft-sky

sky

soft-blue

blue

soft-asphalt

asphalt

soft-turquoise

turquoise

soft-green

green

soft-olive

olive


Markup
<!-- Snippets -->
<div class="lines white">white</div>
<div class="lines soft">soft</div>
<div class="lines soft-grey">soft-grey</div>
<div class="lines grey">grey</div>
<div class="lines hard-grey">hard-grey</div>
<div class="lines black">black</div>
<div class="lines soft-yellow">soft-yellow</div>
<div class="lines yellow">yellow</div>
<div class="lines soft-amber">soft-amber</div>
<div class="lines amber">amber</div>
<div class="lines soft-orange">soft-orange</div>
<div class="lines orange">orange</div>
<div class="lines soft-red">soft-red</div>
<div class="lines red">red</div>
<div class="lines soft-granate">soft-granate</div>
<div class="lines granate">granate</div>
<div class="lines soft-brown">soft-brown</div>
<div class="lines brown">brown</div>
<div class="lines soft-pink">soft-pink</div>
<div class="lines pink">pink</div>
<div class="lines soft-magenta">soft-magenta</div>
<div class="lines magenta">magenta</div>
<div class="lines soft-violet">soft-violet</div>
<div class="lines violet">violet</div>
<div class="lines soft-sky">soft-sky</div>
<div class="lines sky">sky</div>
<div class="lines soft-blue">blue</div>
<div class="lines blue">blue</div>
<div class="lines soft-asphalt">soft-asphalt</div>
<div class="lines asphalt">asphalt</div>
<div class="lines soft-turquoise">soft-turquoise</div>
<div class="lines turquoise">turquoise</div>
<div class="lines soft-green">soft-green</div>
<div class="lines green">green</div>
<div class="lines soft-olive">soft-olive</div>
<div class="lines olive">olive</div>
								

http://hipertextos.github.io/src/css/styles.css

Color classes (Line top)

.line-top + .[colorname]

Sample
white

soft

soft-grey

grey

hard-grey

black

soft-yellow

yellow

soft-amber

amber

soft-orange

orange

soft-red

red

soft-granate

granate

soft-brown

brown

soft-pink

pink

soft-magenta

magenta

soft-violet

violet

soft-sky

sky

soft-blue

blue

soft-asphalt

asphalt

soft-turquoise

turquoise

soft-green

green

soft-olive

olive


Markup
<!-- Snippets -->
<div class="line-top white">white</div>
<div class="line-top soft">soft</div>
<div class="line-top soft-grey">soft-grey</div>
<div class="line-top grey">grey</div>
<div class="line-top hard-grey">hard-grey</div>
<div class="line-top black">black</div>
<div class="line-top soft-yellow">soft-yellow</div>
<div class="line-top yellow">yellow</div>
<div class="line-top soft-amber">soft-amber</div>
<div class="line-top amber">amber</div>
<div class="line-top soft-orange">soft-orange</div>
<div class="line-top orange">orange</div>
<div class="line-top soft-red">soft-red</div>
<div class="line-top red">red</div>
<div class="line-top soft-granate">soft-granate</div>
<div class="line-top granate">granate</div>
<div class="line-top soft-brown">soft-brown</div>
<div class="line-top brown">brown</div>
<div class="line-top soft-pink">soft-pink</div>
<div class="line-top pink">pink</div>
<div class="line-top soft-magenta">soft-magenta</div>
<div class="line-top magenta">magenta</div>
<div class="line-top soft-violet">soft-violet</div>
<div class="line-top violet">violet</div>
<div class="line-top soft-sky">soft-sky</div>
<div class="line-top sky">sky</div>
<div class="line-top soft-blue">blue</div>
<div class="line-top blue">blue</div>
<div class="line-top soft-asphalt">soft-asphalt</div>
<div class="line-top asphalt">asphalt</div>
<div class="line-top soft-turquoise">soft-turquoise</div>
<div class="line-top turquoise">turquoise</div>
<div class="line-top soft-green">soft-green</div>
<div class="line-top green">green</div>
<div class="line-top soft-olive">soft-olive</div>
<div class="line-top olive">olive</div>
								

http://hipertextos.github.io/src/css/styles.css

Color classes (Line bottom)

.line-bottom + .[colorname]

Sample
white

soft

soft-grey

grey

hard-grey

black

soft-yellow

yellow

soft-amber

amber

soft-orange

orange

soft-red

red

soft-granate

granate

soft-brown

brown

soft-pink

pink

soft-magenta

magenta

soft-violet

violet

soft-sky

sky

soft-blue

blue

soft-asphalt

asphalt

soft-turquoise

turquoise

soft-green

green

soft-olive

olive


Markup
<!-- Snippets -->
<div class="line-bottom white">white</div>
<div class="line-bottom soft">soft</div>
<div class="line-bottom soft-grey">soft-grey</div>
<div class="line-bottom grey">grey</div>
<div class="line-bottom hard-grey">hard-grey</div>
<div class="line-bottom black">black</div>
<div class="line-bottom soft-yellow">soft-yellow</div>
<div class="line-bottom yellow">yellow</div>
<div class="line-bottom soft-amber">soft-amber</div>
<div class="line-bottom amber">amber</div>
<div class="line-bottom soft-orange">soft-orange</div>
<div class="line-bottom orange">orange</div>
<div class="line-bottom soft-red">soft-red</div>
<div class="line-bottom red">red</div>
<div class="line-bottom soft-granate">soft-granate</div>
<div class="line-bottom granate">granate</div>
<div class="line-bottom soft-brown">soft-brown</div>
<div class="line-bottom brown">brown</div>
<div class="line-bottom soft-pink">soft-pink</div>
<div class="line-bottom pink">pink</div>
<div class="line-bottom soft-magenta">soft-magenta</div>
<div class="line-bottom magenta">magenta</div>
<div class="line-bottom soft-violet">soft-violet</div>
<div class="line-bottom violet">violet</div>
<div class="line-bottom soft-sky">soft-sky</div>
<div class="line-bottom sky">sky</div>
<div class="line-bottom soft-blue">blue</div>
<div class="line-bottom blue">blue</div>
<div class="line-bottom soft-asphalt">soft-asphalt</div>
<div class="line-bottom asphalt">asphalt</div>
<div class="line-bottom soft-turquoise">soft-turquoise</div>
<div class="line-bottom turquoise">turquoise</div>
<div class="line-bottom soft-green">soft-green</div>
<div class="line-bottom green">green</div>
<div class="line-bottom soft-olive">soft-olive</div>
<div class="line-bottom olive">olive</div>
								

http://hipertextos.github.io/src/css/styles.css

Color classes (Line left)

.line-left + .[colorname]

Sample
white

soft

soft-grey

grey

hard-grey

black

soft-yellow

yellow

soft-amber

amber

soft-orange

orange

soft-red

red

soft-granate

granate

soft-brown

brown

soft-pink

pink

soft-magenta

magenta

soft-violet

violet

soft-sky

sky

soft-blue

blue

soft-asphalt

asphalt

soft-turquoise

turquoise

soft-green

green

soft-olive

olive


Markup
<!-- Snippets -->
<div class="line-left white">white</div>
<div class="line-left soft">soft</div>
<div class="line-left soft-grey">soft-grey</div>
<div class="line-left grey">grey</div>
<div class="line-left hard-grey">hard-grey</div>
<div class="line-left black">black</div>
<div class="line-left soft-yellow">soft-yellow</div>
<div class="line-left yellow">yellow</div>
<div class="line-left soft-amber">soft-amber</div>
<div class="line-left amber">amber</div>
<div class="line-left soft-orange">soft-orange</div>
<div class="line-left orange">orange</div>
<div class="line-left soft-red">soft-red</div>
<div class="line-left red">red</div>
<div class="line-left soft-granate">soft-granate</div>
<div class="line-left granate">granate</div>
<div class="line-left soft-brown">soft-brown</div>
<div class="line-left brown">brown</div>
<div class="line-left soft-pink">soft-pink</div>
<div class="line-left pink">pink</div>
<div class="line-left soft-magenta">soft-magenta</div>
<div class="line-left magenta">magenta</div>
<div class="line-left soft-violet">soft-violet</div>
<div class="line-left violet">violet</div>
<div class="line-left soft-sky">soft-sky</div>
<div class="line-left sky">sky</div>
<div class="line-left soft-turquoise">turquoise</div>
<div class="line-left turquoise">turquoise</div>
<div class="line-left soft-asphalt">soft-asphalt</div>
<div class="line-left asphalt">asphalt</div>
<div class="line-left soft-turquoise">soft-turquoise</div>
<div class="line-left turquoise">turquoise</div>
<div class="line-left soft-green">soft-green</div>
<div class="line-left green">green</div>
<div class="line-left soft-olive">soft-olive</div>
<div class="line-left olive">olive</div>
								

http://hipertextos.github.io/src/css/styles.css

Color classes (Line right)

.line-right + .[colorname]

Sample
white

soft

soft-grey

grey

hard-grey

black

soft-yellow

yellow

soft-amber

amber

soft-orange

orange

soft-red

red

soft-granate

granate

soft-brown

brown

soft-pink

pink

soft-magenta

magenta

soft-violet

violet

soft-sky

sky

soft-blue

blue

soft-asphalt

asphalt

soft-turquoise

turquoise

soft-green

green

soft-olive

olive


Markup
<!-- Snippets -->
<div class="line-right white">white</div>
<div class="line-right soft">soft</div>
<div class="line-right soft-grey">soft-grey</div>
<div class="line-right grey">grey</div>
<div class="line-right hard-grey">hard-grey</div>
<div class="line-right black">black</div>
<div class="line-right soft-yellow">soft-yellow</div>
<div class="line-right yellow">yellow</div>
<div class="line-right soft-amber">soft-amber</div>
<div class="line-right amber">amber</div>
<div class="line-right soft-orange">soft-orange</div>
<div class="line-right orange">orange</div>
<div class="line-right soft-red">soft-red</div>
<div class="line-right red">red</div>
<div class="line-right soft-granate">soft-granate</div>
<div class="line-right granate">granate</div>
<div class="line-right soft-brown">soft-brown</div>
<div class="line-right brown">brown</div>
<div class="line-right soft-pink">soft-pink</div>
<div class="line-right pink">pink</div>
<div class="line-right soft-magenta">soft-magenta</div>
<div class="line-right magenta">magenta</div>
<div class="line-right soft-violet">soft-violet</div>
<div class="line-right violet">violet</div>
<div class="line-right soft-sky">soft-sky</div>
<div class="line-right sky">sky</div>
<div class="line-right soft-blue">blue</div>
<div class="line-right blue">blue</div>
<div class="line-right soft-asphalt">soft-asphalt</div>
<div class="line-right asphalt">asphalt</div>
<div class="line-right soft-turquoise">soft-turquoise</div>
<div class="line-right turquoise">turquoise</div>
<div class="line-right soft-green">soft-green</div>
<div class="line-right green">green</div>
<div class="line-right soft-olive">soft-olive</div>
<div class="line-right olive">olive</div>
								

http://hipertextos.github.io/src/css/styles.css

Color classes (Line all)

.line-all + .[colorname]

Sample
white

soft

soft-grey

grey

hard-grey

black

soft-yellow

yellow

soft-amber

amber

soft-orange

orange

soft-red

red

soft-granate

granate

soft-brown

brown

soft-pink

pink

soft-magenta

magenta

soft-violet

violet

soft-sky

sky

soft-blue

blue

soft-asphalt

asphalt

soft-turquoise

turquoise

soft-green

green

soft-olive

olive


Markup
<!-- Snippets -->
<div class="line-all white">white</div>
<div class="line-all soft">soft</div>
<div class="line-all soft-grey">soft-grey</div>
<div class="line-all grey">grey</div>
<div class="line-all hard-grey">hard-grey</div>
<div class="line-all black">black</div>
<div class="line-all soft-yellow">soft-yellow</div>
<div class="line-all yellow">yellow</div>
<div class="line-all soft-amber">soft-amber</div>
<div class="line-all amber">amber</div>
<div class="line-all soft-orange">soft-orange</div>
<div class="line-all orange">orange</div>
<div class="line-all soft-red">soft-red</div>
<div class="line-all red">red</div>
<div class="line-all soft-granate">soft-granate</div>
<div class="line-all granate">granate</div>
<div class="line-all soft-brown">soft-brown</div>
<div class="line-all brown">brown</div>
<div class="line-all soft-pink">soft-pink</div>
<div class="line-all pink">pink</div>
<div class="line-all soft-magenta">soft-magenta</div>
<div class="line-all magenta">magenta</div>
<div class="line-all soft-violet">soft-violet</div>
<div class="line-all violet">violet</div>
<div class="line-all soft-sky">soft-sky</div>
<div class="line-all sky">sky</div>
<div class="line-all soft-blue">blue</div>
<div class="line-all blue">blue</div>
<div class="line-all soft-asphalt">soft-asphalt</div>
<div class="line-all asphalt">asphalt</div>
<div class="line-all soft-turquoise">soft-turquoise</div>
<div class="line-all turquoise">turquoise</div>
<div class="line-all soft-green">soft-green</div>
<div class="line-all green">green</div>
<div class="line-all soft-olive">soft-olive</div>
<div class="line-all olive">olive</div>
								

http://hipertextos.github.io/src/css/styles.css

Color classes (Flat)

.flat + .[colorname]

Sample
white

soft

soft-grey

grey

hard-grey

black

soft-yellow

yellow

soft-amber

amber

soft-orange

orange

soft-red

red

soft-granate

granate

soft-brown

brown

soft-pink

pink

soft-magenta

magenta

soft-violet

violet

soft-sky

sky

soft-blue

blue

soft-asphalt

asphalt

soft-turquoise

turquoise

soft-green

green

soft-olive

olive


Markup
<!-- Snippets -->
<div class="flat white">white</div>
<div class="flat soft">soft</div>
<div class="flat soft-grey">soft-grey</div>
<div class="flat grey">grey</div>
<div class="flat hard-grey">hard-grey</div>
<div class="flat black">black</div>
<div class="flat soft-yellow">soft-yellow</div>
<div class="flat yellow">yellow</div>
<div class="flat soft-amber">soft-amber</div>
<div class="flat amber">amber</div>
<div class="flat soft-orange">soft-orange</div>
<div class="flat orange">orange</div>
<div class="flat soft-red">soft-red</div>
<div class="flat red">red</div>
<div class="flat soft-granate">soft-granate</div>
<div class="flat granate">granate</div>
<div class="flat soft-brown">soft-brown</div>
<div class="flat brown">brown</div>
<div class="flat soft-pink">soft-pink</div>
<div class="flat pink">pink</div>
<div class="flat soft-magenta">soft-magenta</div>
<div class="flat magenta">magenta</div>
<div class="flat soft-violet">soft-violet</div>
<div class="flat violet">violet</div>
<div class="flat soft-sky">soft-sky</div>
<div class="flat sky">sky</div>
<div class="flat soft-blue">blue</div>
<div class="flat blue">blue</div>
<div class="flat soft-asphalt">soft-asphalt</div>
<div class="flat asphalt">asphalt</div>
<div class="flat soft-turquoise">soft-turquoise</div>
<div class="flat turquoise">turquoise</div>
<div class="flat soft-green">soft-green</div>
<div class="flat green">green</div>
<div class="flat soft-olive">soft-olive</div>
<div class="flat olive">olive</div>
								

http://hipertextos.github.io/src/css/styles.css

Color classes (gloom)

.gloom + .[colorname]

Sample
white

soft

soft-grey

grey

hard-grey

black

soft-yellow

yellow

soft-amber

amber

soft-orange

orange

soft-red

red

soft-granate

granate

soft-brown

brown

soft-pink

pink

soft-magenta

magenta

soft-violet

violet

soft-sky

sky

soft-blue

blue

soft-asphalt

asphalt

soft-turquoise

turquoise

soft-green

green

soft-olive

olive


Markup
<!-- Snippets -->
<div class="gloom white">white</div>
<div class="gloom soft">soft</div>
<div class="gloom soft-grey">soft-grey</div>
<div class="gloom grey">grey</div>
<div class="gloom hard-grey">hard-grey</div>
<div class="gloom black">black</div>
<div class="gloom soft-yellow">soft-yellow</div>
<div class="gloom yellow">yellow</div>
<div class="gloom soft-amber">soft-amber</div>
<div class="gloom amber">amber</div>
<div class="gloom soft-orange">soft-orange</div>
<div class="gloom orange">orange</div>
<div class="gloom soft-red">soft-red</div>
<div class="gloom red">red</div>
<div class="gloom soft-granate">soft-granate</div>
<div class="gloom granate">granate</div>
<div class="gloom soft-brown">soft-brown</div>
<div class="gloom brown">brown</div>
<div class="gloom soft-pink">soft-pink</div>
<div class="gloom pink">pink</div>
<div class="gloom soft-magenta">soft-magenta</div>
<div class="gloom magenta">magenta</div>
<div class="gloom soft-violet">soft-violet</div>
<div class="gloom violet">violet</div>
<div class="gloom soft-sky">soft-sky</div>
<div class="gloom sky">sky</div>
<div class="gloom soft-blue">blue</div>
<div class="gloom blue">blue</div>
<div class="gloom soft-asphalt">soft-asphalt</div>
<div class="gloom asphalt">asphalt</div>
<div class="gloom soft-turquoise">soft-turquoise</div>
<div class="gloom turquoise">turquoise</div>
<div class="gloom soft-green">soft-green</div>
<div class="gloom green">green</div>
<div class="gloom soft-olive">soft-olive</div>
<div class="gloom olive">olive</div>
								

http://hipertextos.github.io/src/css/styles.css

Color classes (dark)

.dark + .[colorname]

Sample
white

soft

soft-grey

grey

hard-grey

black

soft-yellow

yellow

soft-amber

amber

soft-orange

orange

soft-red

red

soft-granate

granate

soft-brown

brown

soft-pink

pink

soft-magenta

magenta

soft-violet

violet

soft-sky

sky

soft-blue

blue

soft-asphalt

asphalt

soft-turquoise

turquoise

soft-green

green

soft-olive

olive


Markup
<!-- Snippets -->
<div class="dark white">white</div>
<div class="dark soft">soft</div>
<div class="dark soft-grey">soft-grey</div>
<div class="dark grey">grey</div>
<div class="dark hard-grey">hard-grey</div>
<div class="dark black">black</div>
<div class="dark soft-yellow">soft-yellow</div>
<div class="dark yellow">yellow</div>
<div class="dark soft-amber">soft-amber</div>
<div class="dark amber">amber</div>
<div class="dark soft-orange">soft-orange</div>
<div class="dark orange">orange</div>
<div class="dark soft-red">soft-red</div>
<div class="dark red">red</div>
<div class="dark soft-granate">soft-granate</div>
<div class="dark granate">granate</div>
<div class="dark soft-brown">soft-brown</div>
<div class="dark brown">brown</div>
<div class="dark soft-pink">soft-pink</div>
<div class="dark pink">pink</div>
<div class="dark soft-magenta">soft-magenta</div>
<div class="dark magenta">magenta</div>
<div class="dark soft-violet">soft-violet</div>
<div class="dark violet">violet</div>
<div class="dark soft-sky">soft-sky</div>
<div class="dark sky">sky</div>
<div class="dark soft-blue">blue</div>
<div class="dark blue">blue</div>
<div class="dark soft-asphalt">soft-asphalt</div>
<div class="dark asphalt">asphalt</div>
<div class="dark soft-turquoise">soft-turquoise</div>
<div class="dark turquoise">turquoise</div>
<div class="dark soft-green">soft-green</div>
<div class="dark green">green</div>
<div class="dark soft-olive">soft-olive</div>
<div class="dark olive">olive</div>
								

http://hipertextos.github.io/src/css/styles.css

Color classes (Glossy)

.glossy + .[colorname]

Sample
white

soft

soft-grey

grey

hard-grey

black

soft-yellow

yellow

soft-amber

amber

soft-orange

orange

soft-red

red

soft-granate

granate

soft-brown

brown

soft-pink

pink

soft-magenta

magenta

soft-violet

violet

soft-sky

sky

soft-blue

blue

soft-asphalt

asphalt

soft-turquoise

turquoise

soft-green

green

soft-olive

olive


Markup
<!-- Snippets -->
<div class="glossy white">white</div>
<div class="glossy soft">soft</div>
<div class="glossy soft-grey">soft-grey</div>
<div class="glossy grey">grey</div>
<div class="glossy hard-grey">hard-grey</div>
<div class="glossy black">black</div>
<div class="glossy soft-yellow">soft-yellow</div>
<div class="glossy yellow">yellow</div>
<div class="glossy soft-amber">soft-amber</div>
<div class="glossy amber">amber</div>
<div class="glossy soft-orange">soft-orange</div>
<div class="glossy orange">orange</div>
<div class="glossy soft-red">soft-red</div>
<div class="glossy red">red</div>
<div class="glossy soft-granate">soft-granate</div>
<div class="glossy granate">granate</div>
<div class="glossy soft-brown">soft-brown</div>
<div class="glossy brown">brown</div>
<div class="glossy soft-pink">soft-pink</div>
<div class="glossy pink">pink</div>
<div class="glossy soft-magenta">soft-magenta</div>
<div class="glossy magenta">magenta</div>
<div class="glossy soft-violet">soft-violet</div>
<div class="glossy violet">violet</div>
<div class="glossy soft-sky">soft-sky</div>
<div class="glossy sky">sky</div>
<div class="glossy soft-blue">blue</div>
<div class="glossy blue">blue</div>
<div class="glossy soft-asphalt">soft-asphalt</div>
<div class="glossy asphalt">asphalt</div>
<div class="glossy soft-turquoise">soft-turquoise</div>
<div class="glossy turquoise">turquoise</div>
<div class="glossy soft-green">soft-green</div>
<div class="glossy green">green</div>
<div class="glossy soft-olive">soft-olive</div>
<div class="glossy olive">olive</div>
								

http://hipertextos.github.io/src/css/styles.css

Color classes (Shallow)

.shallow + .[colorname]

Sample
white

soft

soft-grey

grey

hard-grey

black

soft-yellow

yellow

soft-amber

amber

soft-orange

orange

soft-red

red

soft-granate

granate

soft-brown

brown

soft-pink

pink

soft-magenta

magenta

soft-violet

violet

soft-sky

sky

soft-blue

blue

soft-asphalt

asphalt

soft-turquoise

turquoise

soft-green

green

soft-olive

olive


Markup
<!-- Snippets -->
<div class="shallow white">white</div>
<div class="shallow soft">soft</div>
<div class="shallow soft-grey">soft-grey</div>
<div class="shallow grey">grey</div>
<div class="shallow hard-grey">hard-grey</div>
<div class="shallow black">black</div>
<div class="shallow soft-yellow">soft-yellow</div>
<div class="shallow yellow">yellow</div>
<div class="shallow soft-amber">soft-amber</div>
<div class="shallow amber">amber</div>
<div class="shallow soft-orange">soft-orange</div>
<div class="shallow orange">orange</div>
<div class="shallow soft-red">soft-red</div>
<div class="shallow red">red</div>
<div class="shallow soft-granate">soft-granate</div>
<div class="shallow granate">granate</div>
<div class="shallow soft-brown">soft-brown</div>
<div class="shallow brown">brown</div>
<div class="shallow soft-pink">soft-pink</div>
<div class="shallow pink">pink</div>
<div class="shallow soft-magenta">soft-magenta</div>
<div class="shallow magenta">magenta</div>
<div class="shallow soft-violet">soft-violet</div>
<div class="shallow violet">violet</div>
<div class="shallow soft-sky">soft-sky</div>
<div class="shallow sky">sky</div>
<div class="shallow soft-blue">blue</div>
<div class="shallow blue">blue</div>
<div class="shallow soft-asphalt">soft-asphalt</div>
<div class="shallow asphalt">asphalt</div>
<div class="shallow soft-turquoise">soft-turquoise</div>
<div class="shallow turquoise">turquoise</div>
<div class="shallow soft-green">soft-green</div>
<div class="shallow green">green</div>
<div class="shallow soft-olive">soft-olive</div>
<div class="shallow olive">olive</div>
								

http://hipertextos.github.io/src/css/styles.css

Color classes (Shading)

.shading + .[colorname]

Sample
white

soft

soft-grey

grey

hard-grey

black

soft-yellow

yellow

soft-amber

amber

soft-orange

orange

soft-red

red

soft-granate

granate

soft-brown

brown

soft-pink

pink

soft-magenta

magenta

soft-violet

violet

soft-sky

sky

soft-blue

blue

soft-asphalt

asphalt

soft-turquoise

turquoise

soft-green

green

soft-olive

olive


Markup
<!-- Snippets -->
<div class="shading white">white</div>
<div class="shading soft">soft</div>
<div class="shading soft-grey">soft-grey</div>
<div class="shading grey">grey</div>
<div class="shading hard-grey">hard-grey</div>
<div class="shading black">black</div>
<div class="shading soft-yellow">soft-yellow</div>
<div class="shading yellow">yellow</div>
<div class="shading soft-amber">soft-amber</div>
<div class="shading amber">amber</div>
<div class="shading soft-orange">soft-orange</div>
<div class="shading orange">orange</div>
<div class="shading soft-red">soft-red</div>
<div class="shading red">red</div>
<div class="shading soft-granate">soft-granate</div>
<div class="shading granate">granate</div>
<div class="shading soft-brown">soft-brown</div>
<div class="shading brown">brown</div>
<div class="shading soft-pink">soft-pink</div>
<div class="shading pink">pink</div>
<div class="shading soft-magenta">soft-magenta</div>
<div class="shading magenta">magenta</div>
<div class="shading soft-turquoise">soft-turquoise</div>
<div class="shading turquoise">turquoise</div>
<div class="shading soft-sky">soft-sky</div>
<div class="shading sky">sky</div>
<div class="shading soft-blue">blue</div>
<div class="shading blue">blue</div>
<div class="shading soft-asphalt">soft-asphalt</div>
<div class="shading asphalt">asphalt</div>
<div class="shading soft-turquoise">soft-turquoise</div>
<div class="shading turquoise">turquoise</div>
<div class="shading soft-green">soft-green</div>
<div class="shading green">green</div>
<div class="shading soft-olive">soft-olive</div>
<div class="shading olive">olive</div>
								

http://hipertextos.github.io/src/css/styles.css

Color classes (Depth)

.depth + .[colorname]

Sample
white

soft

soft-grey

grey

hard-grey

black

soft-yellow

yellow

soft-amber

amber

soft-orange

orange

soft-red

red

soft-granate

granate

soft-brown

brown

soft-pink

pink

soft-magenta

magenta

soft-violet

violet

soft-sky

sky

soft-blue

blue

soft-asphalt

asphalt

soft-turquoise

turquoise

soft-green

green

soft-olive

olive


Markup
<!-- Snippets -->
<div class="depth white">white</div>
<div class="depth soft">soft</div>
<div class="depth soft-grey">soft-grey</div>
<div class="depth grey">grey</div>
<div class="depth hard-grey">hard-grey</div>
<div class="depth black">black</div>
<div class="depth soft-yellow">soft-yellow</div>
<div class="depth yellow">yellow</div>
<div class="depth soft-amber">soft-amber</div>
<div class="depth amber">amber</div>
<div class="depth soft-orange">soft-orange</div>
<div class="depth orange">orange</div>
<div class="depth soft-red">soft-red</div>
<div class="depth red">red</div>
<div class="depth soft-granate">soft-granate</div>
<div class="depth granate">granate</div>
<div class="depth soft-brown">soft-brown</div>
<div class="depth brown">brown</div>
<div class="depth soft-pink">soft-pink</div>
<div class="depth pink">pink</div>
<div class="depth soft-magenta">soft-magenta</div>
<div class="depth magenta">magenta</div>
<div class="depth soft-violet">soft-violet</div>
<div class="depth violet">violet</div>
<div class="depth soft-sky">soft-sky</div>
<div class="depth sky">sky</div>
<div class="depth soft-blue">blue</div>
<div class="depth blue">blue</div>
<div class="depth soft-asphalt">soft-asphalt</div>
<div class="depth asphalt">asphalt</div>
<div class="depth soft-turquoise">soft-turquoise</div>
<div class="depth turquoise">turquoise</div>
<div class="depth soft-green">soft-green</div>
<div class="depth green">green</div>
<div class="depth soft-olive">soft-olive</div>
<div class="depth olive">olive</div>
								

http://hipertextos.github.io/src/css/styles.css

Color classes (Inset)

.inset + .[colorname]

Sample
white

soft

soft-grey

grey

hard-grey

black

soft-yellow

yellow

soft-amber

amber

soft-orange

orange

soft-red

red

soft-granate

granate

soft-brown

brown

soft-pink

pink

soft-magenta

magenta

soft-violet

violet

soft-sky

sky

soft-blue

blue

soft-asphalt

asphalt

soft-turquoise

turquoise

soft-green

green

soft-olive

olive


Markup
<!-- Snippets -->
<div class="inset white">white</div>
<div class="inset soft">soft</div>
<div class="inset soft-grey">soft-grey</div>
<div class="inset grey">grey</div>
<div class="inset hard-grey">hard-grey</div>
<div class="inset black">black</div>
<div class="inset soft-yellow">soft-yellow</div>
<div class="inset yellow">yellow</div>
<div class="inset soft-amber">soft-amber</div>
<div class="inset amber">amber</div>
<div class="inset soft-orange">soft-orange</div>
<div class="inset orange">orange</div>
<div class="inset soft-red">soft-red</div>
<div class="inset red">red</div>
<div class="inset soft-granate">soft-granate</div>
<div class="inset granate">granate</div>
<div class="inset soft-brown">soft-brown</div>
<div class="inset brown">brown</div>
<div class="inset soft-pink">soft-pink</div>
<div class="inset pink">pink</div>
<div class="inset soft-magenta">soft-magenta</div>
<div class="inset magenta">magenta</div>
<div class="inset soft-violet">soft-violet</div>
<div class="inset violet">violet</div>
<div class="inset soft-sky">soft-sky</div>
<div class="inset sky">sky</div>
<div class="inset soft-blue">blue</div>
<div class="inset blue">blue</div>
<div class="inset soft-asphalt">soft-asphalt</div>
<div class="inset asphalt">asphalt</div>
<div class="inset soft-turquoise">soft-turquoise</div>
<div class="inset turquoise">turquoise</div>
<div class="inset soft-green">soft-green</div>
<div class="inset green">green</div>
<div class="inset soft-olive">soft-olive</div>
<div class="inset olive">olive</div>
								

http://hipertextos.github.io/src/css/styles.css

Color classes (pastel)

.pastel + .[colorname]

Sample
white

soft

soft-grey

grey

hard-grey

black

soft-yellow

yellow

soft-amber

amber

soft-orange

orange

soft-red

red

soft-granate

granate

soft-brown

brown

soft-pink

pink

soft-magenta

magenta

soft-violet

violet

soft-sky

sky

soft-blue

blue

soft-asphalt

asphalt

soft-turquoise

turquoise

soft-green

green

soft-olive

olive


Markup
<!-- Snippets -->
<div class="pastel white">white</div>
<div class="pastel soft">soft</div>
<div class="pastel soft-grey">soft-grey</div>
<div class="pastel grey">grey</div>
<div class="pastel hard-grey">hard-grey</div>
<div class="pastel black">black</div>
<div class="pastel soft-yellow">soft-yellow</div>
<div class="pastel yellow">yellow</div>
<div class="pastel soft-amber">soft-amber</div>
<div class="pastel amber">amber</div>
<div class="pastel soft-orange">soft-orange</div>
<div class="pastel orange">orange</div>
<div class="pastel soft-red">soft-red</div>
<div class="pastel red">red</div>
<div class="pastel soft-granate">soft-granate</div>
<div class="pastel granate">granate</div>
<div class="pastel soft-brown">soft-brown</div>
<div class="pastel brown">brown</div>
<div class="pastel soft-pink">soft-pink</div>
<div class="pastel pink">pink</div>
<div class="pastel soft-magenta">soft-magenta</div>
<div class="pastel magenta">magenta</div>
<div class="pastel soft-violet">soft-violet</div>
<div class="pastel violet">violet</div>
<div class="pastel soft-sky">soft-sky</div>
<div class="pastel sky">sky</div>
<div class="pastel soft-blue">blue</div>
<div class="pastel blue">blue</div>
<div class="pastel soft-asphalt">soft-asphalt</div>
<div class="pastel asphalt">asphalt</div>
<div class="pastel soft-turquoise">soft-turquoise</div>
<div class="pastel turquoise">turquoise</div>
<div class="pastel soft-green">soft-green</div>
<div class="pastel green">green</div>
<div class="pastel soft-olive">soft-olive</div>
<div class="pastel olive">olive</div>
								

http://hipertextos.github.io/src/css/styles.css

Color classes (Unify)

.unify + .[colorname]

Sample
white

soft

soft-grey

grey

hard-grey

black

soft-yellow

yellow

soft-amber

amber

soft-orange

orange

soft-red

red

soft-granate

granate

soft-brown

brown

soft-pink

pink

soft-magenta

magenta

soft-violet

violet

soft-sky

sky

soft-blue

blue

soft-asphalt

asphalt

soft-turquoise

turquoise

soft-green

green

soft-olive

olive


Markup
<!-- Snippets -->
<div class="unify white">white</div>
<div class="unify soft">soft</div>
<div class="unify soft-grey">soft-grey</div>
<div class="unify grey">grey</div>
<div class="unify hard-grey">hard-grey</div>
<div class="unify black">black</div>
<div class="unify soft-yellow">soft-yellow</div>
<div class="unify yellow">yellow</div>
<div class="unify soft-amber">soft-amber</div>
<div class="unify amber">amber</div>
<div class="unify soft-orange">soft-orange</div>
<div class="unify orange">orange</div>
<div class="unify soft-red">soft-red</div>
<div class="unify red">red</div>
<div class="unify soft-granate">soft-granate</div>
<div class="unify granate">granate</div>
<div class="unify soft-brown">soft-brown</div>
<div class="unify brown">brown</div>
<div class="unify soft-pink">soft-pink</div>
<div class="unify pink">pink</div>
<div class="unify soft-magenta">soft-magenta</div>
<div class="unify magenta">magenta</div>
<div class="unify soft-violet">soft-violet</div>
<div class="unify violet">violet</div>
<div class="unify soft-sky">soft-sky</div>
<div class="unify sky">sky</div>
<div class="unify soft-blue">blue</div>
<div class="unify blue">blue</div>
<div class="unify soft-asphalt">soft-asphalt</div>
<div class="unify asphalt">asphalt</div>
<div class="unify soft-turquoise">soft-turquoise</div>
<div class="unify turquoise">turquoise</div>
<div class="unify soft-green">soft-green</div>
<div class="unify green">green</div>
<div class="unify soft-olive">soft-olive</div>
<div class="unify olive">olive</div>
								

http://hipertextos.github.io/src/css/styles.css

Color classes (Hover white)

.hover-white + .[colorname]

Sample
white

soft

soft-grey

grey

hard-grey

black

soft-yellow

yellow

soft-amber

amber

soft-orange

orange

soft-red

red

soft-granate

granate

soft-brown

brown

soft-pink

pink

soft-magenta

magenta

soft-violet

violet

soft-sky

sky

soft-blue

blue

soft-asphalt

asphalt

soft-turquoise

turquoise

soft-green

green

soft-olive

olive


Markup
<!-- Snippets -->
<div class="hover-white white">white</div>
<div class="hover-white soft">soft</div>
<div class="hover-white soft-grey">soft-grey</div>
<div class="hover-white grey">grey</div>
<div class="hover-white hard-grey">hard-grey</div>
<div class="hover-white black">black</div>
<div class="hover-white soft-yellow">soft-yellow</div>
<div class="hover-white yellow">yellow</div>
<div class="hover-white soft-amber">soft-amber</div>
<div class="hover-white amber">amber</div>
<div class="hover-white soft-orange">soft-orange</div>
<div class="hover-white orange">orange</div>
<div class="hover-white soft-red">soft-red</div>
<div class="hover-white red">red</div>
<div class="hover-white soft-granate">soft-granate</div>
<div class="hover-white granate">granate</div>
<div class="hover-white soft-brown">soft-brown</div>
<div class="hover-white brown">brown</div>
<div class="hover-white soft-pink">soft-pink</div>
<div class="hover-white pink">pink</div>
<div class="hover-white soft-magenta">soft-magenta</div>
<div class="hover-white magenta">magenta</div>
<div class="hover-white soft-violet">soft-violet</div>
<div class="hover-white violet">violet</div>
<div class="hover-white soft-sky">soft-sky</div>
<div class="hover-white sky">sky</div>
<div class="hover-white soft-blue">blue</div>
<div class="hover-white blue">blue</div>
<div class="hover-white soft-asphalt">soft-asphalt</div>
<div class="hover-white asphalt">asphalt</div>
<div class="hover-white soft-turquoise">soft-turquoise</div>
<div class="hover-white turquoise">turquoise</div>
<div class="hover-white soft-green">soft-green</div>
<div class="hover-white green">green</div>
<div class="hover-white soft-olive">soft-olive</div>
<div class="hover-white olive">olive</div>
								

http://hipertextos.github.io/src/css/styles.css

Color classes (Hover black)

.hover-black + .[colorname]

Sample
white

soft

soft-grey

grey

hard-grey

black

soft-yellow

yellow

soft-amber

amber

soft-orange

orange

soft-red

red

soft-granate

granate

soft-brown

brown

soft-pink

pink

soft-magenta

magenta

soft-violet

violet

soft-sky

sky

soft-blue

blue

soft-asphalt

asphalt

soft-turquoise

turquoise

soft-green

green

soft-olive

olive


Markup
<!-- Snippets -->
<div class="hover-black white">white</div>
<div class="hover-black soft">soft</div>
<div class="hover-black soft-grey">soft-grey</div>
<div class="hover-black grey">grey</div>
<div class="hover-black hard-grey">hard-grey</div>
<div class="hover-black black">black</div>
<div class="hover-black soft-yellow">soft-yellow</div>
<div class="hover-black yellow">yellow</div>
<div class="hover-black soft-amber">soft-amber</div>
<div class="hover-black amber">amber</div>
<div class="hover-black soft-orange">soft-orange</div>
<div class="hover-black orange">orange</div>
<div class="hover-black soft-red">soft-red</div>
<div class="hover-black red">red</div>
<div class="hover-black soft-granate">soft-granate</div>
<div class="hover-black granate">granate</div>
<div class="hover-black soft-brown">soft-brown</div>
<div class="hover-black brown">brown</div>
<div class="hover-black soft-pink">soft-pink</div>
<div class="hover-black pink">pink</div>
<div class="hover-black soft-magenta">soft-magenta</div>
<div class="hover-black magenta">magenta</div>
<div class="hover-black soft-violet">soft-violet</div>
<div class="hover-black violet">violet</div>
<div class="hover-black soft-sky">soft-sky</div>
<div class="hover-black sky">sky</div>
<div class="hover-black soft-blue">blue</div>
<div class="hover-black blue">blue</div>
<div class="hover-black soft-asphalt">soft-asphalt</div>
<div class="hover-black asphalt">asphalt</div>
<div class="hover-black soft-turquoise">soft-turquoise</div>
<div class="hover-black turquoise">turquoise</div>
<div class="hover-black soft-green">soft-green</div>
<div class="hover-black green">green</div>
<div class="hover-black soft-olive">soft-olive</div>
<div class="hover-black olive">olive</div>
								

http://hipertextos.github.io/src/css/styles.css

Color classes (White hover)

.white-hover + .[colorname]

Sample
white

soft

soft-grey

grey

hard-grey

black

soft-yellow

yellow

soft-amber

amber

soft-orange

orange

soft-red

red

soft-granate

granate

soft-brown

brown

soft-pink

pink

soft-magenta

magenta

soft-violet

violet

soft-sky

sky

soft-blue

blue

soft-asphalt

asphalt

soft-turquoise

turquoise

soft-green

green

soft-olive

olive


Markup
<!-- Snippets -->
<div class="white-hover white">white</div>
<div class="white-hover soft">soft</div>
<div class="white-hover soft-grey">soft-grey</div>
<div class="white-hover grey">grey</div>
<div class="white-hover hard-grey">hard-grey</div>
<div class="white-hover black">black</div>
<div class="white-hover soft-yellow">soft-yellow</div>
<div class="white-hover yellow">yellow</div>
<div class="white-hover soft-amber">soft-amber</div>
<div class="white-hover amber">amber</div>
<div class="white-hover soft-orange">soft-orange</div>
<div class="white-hover orange">orange</div>
<div class="white-hover soft-red">soft-red</div>
<div class="white-hover red">red</div>
<div class="white-hover soft-granate">soft-granate</div>
<div class="white-hover granate">granate</div>
<div class="white-hover soft-brown">soft-brown</div>
<div class="white-hover brown">brown</div>
<div class="white-hover soft-pink">soft-pink</div>
<div class="white-hover pink">pink</div>
<div class="white-hover soft-magenta">soft-magenta</div>
<div class="white-hover magenta">magenta</div>
<div class="white-hover soft-violet">soft-violet</div>
<div class="white-hover violet">violet</div>
<div class="white-hover soft-sky">soft-sky</div>
<div class="white-hover sky">sky</div>
<div class="white-hover soft-blue">blue</div>
<div class="white-hover blue">blue</div>
<div class="white-hover soft-asphalt">soft-asphalt</div>
<div class="white-hover asphalt">asphalt</div>
<div class="white-hover soft-turquoise">soft-turquoise</div>
<div class="white-hover turquoise">turquoise</div>
<div class="white-hover soft-green">soft-green</div>
<div class="white-hover green">green</div>
<div class="white-hover soft-olive">soft-olive</div>
<div class="white-hover olive">olive</div>
								

http://hipertextos.github.io/src/css/styles.css

Color classes (Black hover)

.black-hover + .[colorname]

Sample
white

soft

soft-grey

grey

hard-grey

black

soft-yellow

yellow

soft-amber

amber

soft-orange

orange

soft-red

red

soft-granate

granate

soft-brown

brown

soft-pink

pink

soft-magenta

magenta

soft-violet

violet

soft-sky

sky

soft-blue

blue

soft-asphalt

asphalt

soft-turquoise

turquoise

soft-green

green

soft-olive

olive


Markup
<!-- Snippets -->
<div class="black-hover white">white</div>
<div class="black-hover soft">soft</div>
<div class="black-hover soft-grey">soft-grey</div>
<div class="black-hover grey">grey</div>
<div class="black-hover hard-grey">hard-grey</div>
<div class="black-hover black">black</div>
<div class="black-hover soft-yellow">soft-yellow</div>
<div class="black-hover yellow">yellow</div>
<div class="black-hover soft-amber">soft-amber</div>
<div class="black-hover amber">amber</div>
<div class="black-hover soft-orange">soft-orange</div>
<div class="black-hover orange">orange</div>
<div class="black-hover soft-red">soft-red</div>
<div class="black-hover red">red</div>
<div class="black-hover soft-granate">soft-granate</div>
<div class="black-hover granate">granate</div>
<div class="black-hover soft-brown">soft-brown</div>
<div class="black-hover brown">brown</div>
<div class="black-hover soft-pink">soft-pink</div>
<div class="black-hover pink">pink</div>
<div class="black-hover soft-magenta">soft-magenta</div>
<div class="black-hover magenta">magenta</div>
<div class="black-hover soft-violet">soft-violet</div>
<div class="black-hover violet">violet</div>
<div class="black-hover soft-sky">soft-sky</div>
<div class="black-hover sky">sky</div>
<div class="black-hover soft-blue">blue</div>
<div class="black-hover blue">blue</div>
<div class="black-hover soft-asphalt">soft-asphalt</div>
<div class="black-hover asphalt">asphalt</div>
<div class="black-hover soft-turquoise">soft-turquoise</div>
<div class="black-hover turquoise">turquoise</div>
<div class="black-hover soft-green">soft-green</div>
<div class="black-hover green">green</div>
<div class="black-hover soft-olive">soft-olive</div>
<div class="black-hover olive">olive</div>
								

http://hipertextos.github.io/src/css/styles.css

Materials (Stripped background)

.stripped-h + .[colorname]

Sample
white

soft

soft-grey

grey

hard-grey

black

soft-yellow

yellow

soft-amber

amber

soft-orange

orange

soft-red

red

soft-granate

granate

soft-brown

brown

soft-pink

pink

soft-magenta

magenta

soft-violet

violet

soft-sky

sky

soft-blue

blue

soft-asphalt

asphalt

soft-turquoise

turquoise

soft-green

green

soft-olive

olive


Markup
<!-- Snippets -->
<div class="stripped-h white">white</div>
<div class="stripped-h soft">soft</div>
<div class="stripped-h soft-grey">soft-grey</div>
<div class="stripped-h grey">grey</div>
<div class="stripped-h hard-grey">hard-grey</div>
<div class="stripped-h black">black</div>
<div class="stripped-h soft-yellow">soft-yellow</div>
<div class="stripped-h yellow">yellow</div>
<div class="stripped-h soft-amber">soft-amber</div>
<div class="stripped-h amber">amber</div>
<div class="stripped-h soft-orange">soft-orange</div>
<div class="stripped-h orange">orange</div>
<div class="stripped-h soft-red">soft-red</div>
<div class="stripped-h red">red</div>
<div class="stripped-h soft-granate">soft-granate</div>
<div class="stripped-h granate">granate</div>
<div class="stripped-h soft-brown">soft-brown</div>
<div class="stripped-h brown">brown</div>
<div class="stripped-h soft-pink">soft-pink</div>
<div class="stripped-h pink">pink</div>
<div class="stripped-h soft-magenta">soft-magenta</div>
<div class="stripped-h magenta">magenta</div>
<div class="stripped-h soft-violet">soft-violet</div>
<div class="stripped-h violet">violet</div>
<div class="stripped-h soft-sky">soft-sky</div>
<div class="stripped-h sky">sky</div>
<div class="stripped-h soft-blue">blue</div>
<div class="stripped-h blue">blue</div>
<div class="stripped-h soft-asphalt">soft-asphalt</div>
<div class="stripped-h asphalt">asphalt</div>
<div class="stripped-h soft-turquoise">soft-turquoise</div>
<div class="stripped-h turquoise">turquoise</div>
<div class="stripped-h soft-green">soft-green</div>
<div class="stripped-h green">green</div>
<div class="stripped-h soft-olive">soft-olive</div>
<div class="stripped-h olive">olive</div>
								

.stripped-v + .[colorname]

Sample
white

soft

soft-grey

grey

hard-grey

black

soft-yellow

yellow

soft-amber

amber

soft-orange

orange

soft-red

red

soft-granate

granate

soft-brown

brown

soft-pink

pink

soft-magenta

magenta

soft-violet

violet

soft-sky

sky

soft-blue

blue

soft-asphalt

asphalt

soft-turquoise

turquoise

soft-green

green

soft-olive

olive


Markup
<!-- Snippets -->
<div class="stripped-v white">white</div>
<div class="stripped-v soft">soft</div>
<div class="stripped-v soft-grey">soft-grey</div>
<div class="stripped-v grey">grey</div>
<div class="stripped-v hard-grey">hard-grey</div>
<div class="stripped-v black">black</div>
<div class="stripped-v soft-yellow">soft-yellow</div>
<div class="stripped-v yellow">yellow</div>
<div class="stripped-v soft-amber">soft-amber</div>
<div class="stripped-v amber">amber</div>
<div class="stripped-v soft-orange">soft-orange</div>
<div class="stripped-v orange">orange</div>
<div class="stripped-v soft-red">soft-red</div>
<div class="stripped-v red">red</div>
<div class="stripped-v soft-granate">soft-granate</div>
<div class="stripped-v granate">granate</div>
<div class="stripped-v soft-brown">soft-brown</div>
<div class="stripped-v brown">brown</div>
<div class="stripped-v soft-pink">soft-pink</div>
<div class="stripped-v pink">pink</div>
<div class="stripped-v soft-magenta">soft-magenta</div>
<div class="stripped-v magenta">magenta</div>
<div class="stripped-v soft-violet">soft-violet</div>
<div class="stripped-v violet">violet</div>
<div class="stripped-v soft-sky">soft-sky</div>
<div class="stripped-v sky">sky</div>
<div class="stripped-v soft-blue">blue</div>
<div class="stripped-v blue">blue</div>
<div class="stripped-v soft-asphalt">soft-asphalt</div>
<div class="stripped-v asphalt">asphalt</div>
<div class="stripped-v soft-turquoise">soft-turquoise</div>
<div class="stripped-v turquoise">turquoise</div>
<div class="stripped-v soft-green">soft-green</div>
<div class="stripped-v green">green</div>
<div class="stripped-v soft-olive">soft-olive</div>
<div class="stripped-v olive">olive</div>
								

.stripped-y + .[colorname]

Sample
white

soft

soft-grey

grey

hard-grey

black

soft-yellow

yellow

soft-amber

amber

soft-orange

orange

soft-red

red

soft-granate

granate

soft-brown

brown

soft-pink

pink

soft-magenta

magenta

soft-violet

violet

soft-sky

sky

soft-blue

blue

soft-asphalt

asphalt

soft-turquoise

turquoise

soft-green

green

soft-olive

olive


Markup
<!-- Snippets -->
<div class="stripped-y white">white</div>
<div class="stripped-y soft">soft</div>
<div class="stripped-y soft-grey">soft-grey</div>
<div class="stripped-y grey">grey</div>
<div class="stripped-y hard-grey">hard-grey</div>
<div class="stripped-y black">black</div>
<div class="stripped-y soft-yellow">soft-yellow</div>
<div class="stripped-y yellow">yellow</div>
<div class="stripped-y soft-amber">soft-amber</div>
<div class="stripped-y amber">amber</div>
<div class="stripped-y soft-orange">soft-orange</div>
<div class="stripped-y orange">orange</div>
<div class="stripped-y soft-red">soft-red</div>
<div class="stripped-y red">red</div>
<div class="stripped-y soft-granate">soft-granate</div>
<div class="stripped-y granate">granate</div>
<div class="stripped-y soft-brown">soft-brown</div>
<div class="stripped-y brown">brown</div>
<div class="stripped-y soft-pink">soft-pink</div>
<div class="stripped-y pink">pink</div>
<div class="stripped-y soft-magenta">soft-magenta</div>
<div class="stripped-y magenta">magenta</div>
<div class="stripped-y soft-violet">soft-violet</div>
<div class="stripped-y violet">violet</div>
<div class="stripped-y soft-sky">soft-sky</div>
<div class="stripped-y sky">sky</div>
<div class="stripped-y soft-blue">blue</div>
<div class="stripped-y blue">blue</div>
<div class="stripped-y soft-asphalt">soft-asphalt</div>
<div class="stripped-y asphalt">asphalt</div>
<div class="stripped-y soft-turquoise">soft-turquoise</div>
<div class="stripped-y turquoise">turquoise</div>
<div class="stripped-y soft-green">soft-green</div>
<div class="stripped-y green">green</div>
<div class="stripped-y soft-olive">soft-olive</div>
<div class="stripped-y olive">olive</div>
								

.stripped-x + .[colorname]

Sample
white

soft

soft-grey

grey

hard-grey

black

soft-yellow

yellow

soft-amber

amber

soft-orange

orange

soft-red

red

soft-granate

granate

soft-brown

brown

soft-pink

pink

soft-magenta

magenta

soft-violet

violet

soft-sky

sky

soft-blue

blue

soft-asphalt

asphalt

soft-turquoise

turquoise

soft-green

green

soft-olive

olive


Markup
<!-- Snippets -->
<div class="stripped-x white">white</div>
<div class="stripped-x soft">soft</div>
<div class="stripped-x soft-grey">soft-grey</div>
<div class="stripped-x grey">grey</div>
<div class="stripped-x hard-grey">hard-grey</div>
<div class="stripped-x black">black</div>
<div class="stripped-x soft-yellow">soft-yellow</div>
<div class="stripped-x yellow">yellow</div>
<div class="stripped-x soft-amber">soft-amber</div>
<div class="stripped-x amber">amber</div>
<div class="stripped-x soft-orange">soft-orange</div>
<div class="stripped-x orange">orange</div>
<div class="stripped-x soft-red">soft-red</div>
<div class="stripped-x red">red</div>
<div class="stripped-x soft-granate">soft-granate</div>
<div class="stripped-x granate">granate</div>
<div class="stripped-x soft-brown">soft-brown</div>
<div class="stripped-x brown">brown</div>
<div class="stripped-x soft-pink">soft-pink</div>
<div class="stripped-x pink">pink</div>
<div class="stripped-x soft-magenta">soft-magenta</div>
<div class="stripped-x magenta">magenta</div>
<div class="stripped-x soft-violet">soft-violet</div>
<div class="stripped-x violet">violet</div>
<div class="stripped-x soft-sky">soft-sky</div>
<div class="stripped-x sky">sky</div>
<div class="stripped-x soft-blue">blue</div>
<div class="stripped-x blue">blue</div>
<div class="stripped-x soft-asphalt">soft-asphalt</div>
<div class="stripped-x asphalt">asphalt</div>
<div class="stripped-x soft-turquoise">soft-turquoise</div>
<div class="stripped-x turquoise">turquoise</div>
<div class="stripped-x soft-green">soft-green</div>
<div class="stripped-x green">green</div>
<div class="stripped-x soft-olive">soft-olive</div>
<div class="stripped-x olive">olive</div>
								

http://hipertextos.github.io/src/css/styles.css

Materials (paper)

Papers (combinable with colors)

Sample
paper

paper-front

paper-back

paper-front


.paper-hover

.paper-hover

.paper-hover


Markup
<!-- Snippets -->
<div class="flat paper">paper</div>
<div class="flat paper-front">paper-front</div>
<div class="pape-back">paper-back</div>
<div class="flat paper-float">paper-front</div>
								

.paper + .flat + .[colorname]

Sample
white

soft

soft-grey

grey

hard-grey

black

soft-yellow

yellow

soft-amber

amber

soft-orange

orange

soft-red

red

soft-granate

granate

soft-brown

brown

soft-pink

pink

soft-magenta

magenta

soft-violet

violet

soft-sky

sky

soft-blue

blue

soft-asphalt

asphalt

soft-turquoise

turquoise

soft-green

green

soft-olive

olive


Markup
<!-- Snippets -->
<div class="flat paper white">white</div>
<div class="flat paper soft">soft</div>
<div class="flat paper soft-grey">soft-grey</div>
<div class="flat paper grey">grey</div>
<div class="flat paper hard-grey">hard-grey</div>
<div class="flat paper black">black</div>
<div class="flat paper soft-yellow">soft-yellow</div>
<div class="flat paper yellow">yellow</div>
<div class="flat paper soft-amber">soft-amber</div>
<div class="flat paper amber">amber</div>
<div class="flat paper soft-orange">soft-orange</div>
<div class="flat paper orange">orange</div>
<div class="flat paper soft-red">soft-red</div>
<div class="flat paper red">red</div>
<div class="flat paper soft-granate">soft-granate</div>
<div class="flat paper granate">granate</div>
<div class="flat paper soft-brown">soft-brown</div>
<div class="flat paper brown">brown</div>
<div class="flat paper soft-pink">soft-pink</div>
<div class="flat paper pink">pink</div>
<div class="flat paper soft-magenta">soft-magenta</div>
<div class="flat paper magenta">magenta</div>
<div class="flat paper soft-violet">soft-violet</div>
<div class="flat paper violet">violet</div>
<div class="flat paper soft-sky">soft-sky</div>
<div class="flat paper sky">sky</div>
<div class="flat paper soft-blue">blue</div>
<div class="flat paper blue">blue</div>
<div class="flat paper soft-asphalt">soft-asphalt</div>
<div class="flat paper asphalt">asphalt</div>
<div class="flat paper soft-turquoise">soft-turquoise</div>
<div class="flat paper turquoise">turquoise</div>
<div class="flat paper soft-green">soft-green</div>
<div class="flat paper green">green</div>
<div class="flat paper soft-olive">soft-olive</div>
<div class="flat paper olive">olive</div>
								

.paper-front + .flat + .[colorname]

Sample
white

soft

soft-grey

grey

hard-grey

black

soft-yellow

yellow

soft-amber

amber

soft-orange

orange

soft-red

red

soft-granate

granate

soft-brown

brown

soft-pink

pink

soft-magenta

magenta

soft-violet

violet

soft-sky

sky

soft-blue

blue

soft-asphalt

asphalt

soft-turquoise

turquoise

soft-green

green

soft-olive

olive


Markup
<!-- Snippets -->
<div class="flat paper-front white">white</div>
<div class="flat paper-front soft">soft</div>
<div class="flat paper-front soft-grey">soft-grey</div>
<div class="flat paper-front grey">grey</div>
<div class="flat paper-front hard-grey">hard-grey</div>
<div class="flat paper-front black">black</div>
<div class="flat paper-front soft-yellow">soft-yellow</div>
<div class="flat paper-front yellow">yellow</div>
<div class="flat paper-front soft-amber">soft-amber</div>
<div class="flat paper-front amber">amber</div>
<div class="flat paper-front soft-orange">soft-orange</div>
<div class="flat paper-front orange">orange</div>
<div class="flat paper-front soft-red">soft-red</div>
<div class="flat paper-front red">red</div>
<div class="flat paper-front soft-granate">soft-granate</div>
<div class="flat paper-front granate">granate</div>
<div class="flat paper-front soft-brown">soft-brown</div>
<div class="flat paper-front brown">brown</div>
<div class="flat paper-front soft-pink">soft-pink</div>
<div class="flat paper-front pink">pink</div>
<div class="flat paper-front soft-magenta">soft-magenta</div>
<div class="flat paper-front magenta">magenta</div>
<div class="flat paper-front soft-violet">soft-violet</div>
<div class="flat paper-front violet">violet</div>
<div class="flat paper-front soft-sky">soft-sky</div>
<div class="flat paper-front sky">sky</div>
<div class="flat paper-front soft-blue">blue</div>
<div class="flat paper-front blue">blue</div>
<div class="flat paper-front soft-asphalt">soft-asphalt</div>
<div class="flat paper-front asphalt">asphalt</div>
<div class="flat paper-front soft-turquoise">soft-turquoise</div>
<div class="flat paper-front turquoise">turquoise</div>
<div class="flat paper-front soft-green">soft-green</div>
<div class="flat paper-front green">green</div>
<div class="flat paper-front soft-olive">soft-olive</div>
<div class="flat paper-front olive">olive</div>
								

.paper-back + .flat + .[colorname]

Sample
white

soft

soft-grey

grey

hard-grey

black

soft-yellow

yellow

soft-amber

amber

soft-orange

orange

soft-red

red

soft-granate

granate

soft-brown

brown

soft-pink

pink

soft-magenta

magenta

soft-violet

violet

soft-sky

sky

soft-blue

blue

soft-asphalt

asphalt

soft-turquoise

turquoise

soft-green

green

soft-olive

olive


Markup
<!-- Snippets -->
<div class="flat paper-back white">white</div>
<div class="flat paper-back soft">soft</div>
<div class="flat paper-back soft-grey">soft-grey</div>
<div class="flat paper-back grey">grey</div>
<div class="flat paper-back hard-grey">hard-grey</div>
<div class="flat paper-back black">black</div>
<div class="flat paper-back soft-yellow">soft-yellow</div>
<div class="flat paper-back yellow">yellow</div>
<div class="flat paper-back soft-amber">soft-amber</div>
<div class="flat paper-back amber">amber</div>
<div class="flat paper-back soft-orange">soft-orange</div>
<div class="flat paper-back orange">orange</div>
<div class="flat paper-back soft-red">soft-red</div>
<div class="flat paper-back red">red</div>
<div class="flat paper-back soft-granate">soft-granate</div>
<div class="flat paper-back granate">granate</div>
<div class="flat paper-back soft-brown">soft-brown</div>
<div class="flat paper-back brown">brown</div>
<div class="flat paper-back soft-pink">soft-pink</div>
<div class="flat paper-back pink">pink</div>
<div class="flat paper-back soft-magenta">soft-magenta</div>
<div class="flat paper-back magenta">magenta</div>
<div class="flat paper-back soft-violet">soft-violet</div>
<div class="flat paper-back violet">violet</div>
<div class="flat paper-back soft-sky">soft-sky</div>
<div class="flat paper-back sky">sky</div>
<div class="flat paper-back soft-blue">blue</div>
<div class="flat paper-back blue">blue</div>
<div class="flat paper-back soft-asphalt">soft-asphalt</div>
<div class="flat paper-back asphalt">asphalt</div>
<div class="flat paper-back soft-turquoise">soft-turquoise</div>
<div class="flat paper-back turquoise">turquoise</div>
<div class="flat paper-back soft-green">soft-green</div>
<div class="flat paper-back green">green</div>
<div class="flat paper-back soft-olive">soft-olive</div>
<div class="flat paper-back olive">olive</div>
								

.paper-float + .flat + .[colorname]

Sample
white

soft

soft-grey

grey

hard-grey

black

soft-yellow

yellow

soft-amber

amber

soft-orange

orange

soft-red

red

soft-granate

granate

soft-brown

brown

soft-pink

pink

soft-magenta

magenta

soft-violet

violet

soft-sky

sky

soft-blue

blue

soft-asphalt

asphalt

soft-turquoise

turquoise

soft-green

green

soft-olive

olive


Markup
<!-- Snippets -->
<div class="flat paper-float white">white</div>
<div class="flat paper-float soft">soft</div>
<div class="flat paper-float soft-grey">soft-grey</div>
<div class="flat paper-float grey">grey</div>
<div class="flat paper-float hard-grey">hard-grey</div>
<div class="flat paper-float black">black</div>
<div class="flat paper-float soft-yellow">soft-yellow</div>
<div class="flat paper-float yellow">yellow</div>
<div class="flat paper-float soft-amber">soft-amber</div>
<div class="flat paper-float amber">amber</div>
<div class="flat paper-float soft-orange">soft-orange</div>
<div class="flat paper-float orange">orange</div>
<div class="flat paper-float soft-red">soft-red</div>
<div class="flat paper-float red">red</div>
<div class="flat paper-float soft-granate">soft-granate</div>
<div class="flat paper-float granate">granate</div>
<div class="flat paper-float soft-brown">soft-brown</div>
<div class="flat paper-float brown">brown</div>
<div class="flat paper-float soft-pink">soft-pink</div>
<div class="flat paper-float pink">pink</div>
<div class="flat paper-float soft-magenta">soft-magenta</div>
<div class="flat paper-float magenta">magenta</div>
<div class="flat paper-float soft-violet">soft-violet</div>
<div class="flat paper-float violet">violet</div>
<div class="flat paper-float soft-sky">soft-sky</div>
<div class="flat paper-float sky">sky</div>
<div class="flat paper-float soft-blue">blue</div>
<div class="flat paper-float blue">blue</div>
<div class="flat paper-float soft-asphalt">soft-asphalt</div>
<div class="flat paper-float asphalt">asphalt</div>
<div class="flat paper-float soft-turquoise">soft-turquoise</div>
<div class="flat paper-float turquoise">turquoise</div>
<div class="flat paper-float soft-green">soft-green</div>
<div class="flat paper-float green">green</div>
<div class="flat paper-float soft-olive">soft-olive</div>
<div class="flat paper-float olive">olive</div>
								

.paper-hover + .flat + .[colorname]

Sample
white

soft

soft-grey

grey

hard-grey

black

soft-yellow

yellow

soft-amber

amber

soft-orange

orange

soft-red

red

soft-granate

granate

soft-brown

brown

soft-pink

pink

soft-magenta

magenta

soft-violet

violet

soft-sky

sky

soft-blue

blue

soft-asphalt

asphalt

soft-turquoise

turquoise

soft-green

green

soft-olive

olive


Markup
<!-- Snippets -->
<div class="flat paper-hover white">white</div>
<div class="flat paper-hover soft">soft</div>
<div class="flat paper-hover soft-grey">soft-grey</div>
<div class="flat paper-hover grey">grey</div>
<div class="flat paper-hover hard-grey">hard-grey</div>
<div class="flat paper-hover black">black</div>
<div class="flat paper-hover soft-yellow">soft-yellow</div>
<div class="flat paper-hover yellow">yellow</div>
<div class="flat paper-hover soft-amber">soft-amber</div>
<div class="flat paper-hover amber">amber</div>
<div class="flat paper-hover soft-orange">soft-orange</div>
<div class="flat paper-hover orange">orange</div>
<div class="flat paper-hover soft-red">soft-red</div>
<div class="flat paper-hover red">red</div>
<div class="flat paper-hover soft-granate">soft-granate</div>
<div class="flat paper-hover granate">granate</div>
<div class="flat paper-hover soft-brown">soft-brown</div>
<div class="flat paper-hover brown">brown</div>
<div class="flat paper-hover soft-pink">soft-pink</div>
<div class="flat paper-hover pink">pink</div>
<div class="flat paper-hover soft-magenta">soft-magenta</div>
<div class="flat paper-hover magenta">magenta</div>
<div class="flat paper-hover soft-violet">soft-violet</div>
<div class="flat paper-hover violet">violet</div>
<div class="flat paper-hover soft-sky">soft-sky</div>
<div class="flat paper-hover sky">sky</div>
<div class="flat paper-hover soft-blue">blue</div>
<div class="flat paper-hover blue">blue</div>
<div class="flat paper-hover soft-asphalt">soft-asphalt</div>
<div class="flat paper-hover asphalt">asphalt</div>
<div class="flat paper-hover soft-turquoise">soft-turquoise</div>
<div class="flat paper-hover turquoise">turquoise</div>
<div class="flat paper-hover soft-green">soft-green</div>
<div class="flat paper-hover green">green</div>
<div class="flat paper-hover soft-olive">soft-olive</div>
<div class="flat paper-hover olive">olive</div>
								

http://hipertextos.github.io/src/css/styles.css

Materials (Glass)

.soft-glass + .[colorname]

Sample
white

soft

soft-grey

grey

hard-grey

black

soft-yellow

yellow

soft-amber

amber

soft-orange

orange

soft-red

red

soft-granate

granate

soft-brown

brown

soft-pink

pink

soft-magenta

magenta

soft-violet

violet

soft-sky

sky

soft-blue

blue

soft-asphalt

asphalt

soft-turquoise

turquoise

soft-green

green

soft-olive

olive


Markup
<!-- Snippets -->
<div class="soft-glass white">white</div>
<div class="soft-glass soft">soft</div>
<div class="soft-glass soft-grey">soft-grey</div>
<div class="soft-glass grey">grey</div>
<div class="soft-glass hard-grey">hard-grey</div>
<div class="soft-glass black">black</div>
<div class="soft-glass soft-yellow">soft-yellow</div>
<div class="soft-glass yellow">yellow</div>
<div class="soft-glass soft-amber">soft-amber</div>
<div class="soft-glass amber">amber</div>
<div class="soft-glass soft-orange">soft-orange</div>
<div class="soft-glass orange">orange</div>
<div class="soft-glass soft-red">soft-red</div>
<div class="soft-glass red">red</div>
<div class="soft-glass soft-granate">soft-granate</div>
<div class="soft-glass granate">granate</div>
<div class="soft-glass soft-brown">soft-brown</div>
<div class="soft-glass brown">brown</div>
<div class="soft-glass soft-pink">soft-pink</div>
<div class="soft-glass pink">pink</div>
<div class="soft-glass soft-magenta">soft-magenta</div>
<div class="soft-glass magenta">magenta</div>
<div class="soft-glass soft-violet">soft-violet</div>
<div class="soft-glass violet">violet</div>
<div class="soft-glass soft-sky">soft-sky</div>
<div class="soft-glass sky">sky</div>
<div class="soft-glass soft-blue">blue</div>
<div class="soft-glass blue">blue</div>
<div class="soft-glass soft-asphalt">soft-asphalt</div>
<div class="soft-glass asphalt">asphalt</div>
<div class="soft-glass soft-turquoise">soft-turquoise</div>
<div class="soft-glass turquoise">turquoise</div>
<div class="soft-glass soft-green">soft-green</div>
<div class="soft-glass green">green</div>
<div class="soft-glass soft-olive">soft-olive</div>
<div class="soft-glass olive">olive</div>
								

.glass + .[colorname]

Sample
white

soft

soft-grey

grey

hard-grey

black

soft-yellow

yellow

soft-amber

amber

soft-orange

orange

soft-red

red

soft-granate

granate

soft-brown

brown

soft-pink

pink

soft-magenta

magenta

soft-violet

violet

soft-sky

sky

soft-blue

blue

soft-asphalt

asphalt

soft-turquoise

turquoise

soft-green

green

soft-olive

olive


Markup
<!-- Snippets -->
<div class="glass white">white</div>
<div class="glass soft">soft</div>
<div class="glass soft-grey">soft-grey</div>
<div class="glass grey">grey</div>
<div class="glass hard-grey">hard-grey</div>
<div class="glass black">black</div>
<div class="glass soft-yellow">soft-yellow</div>
<div class="glass yellow">yellow</div>
<div class="glass soft-amber">soft-amber</div>
<div class="glass amber">amber</div>
<div class="glass soft-orange">soft-orange</div>
<div class="glass orange">orange</div>
<div class="glass soft-red">soft-red</div>
<div class="glass red">red</div>
<div class="glass soft-granate">soft-granate</div>
<div class="glass granate">granate</div>
<div class="glass soft-brown">soft-brown</div>
<div class="glass brown">brown</div>
<div class="glass soft-pink">soft-pink</div>
<div class="glass pink">pink</div>
<div class="glass soft-magenta">soft-magenta</div>
<div class="glass magenta">magenta</div>
<div class="glass soft-violet">soft-violet</div>
<div class="glass violet">violet</div>
<div class="glass soft-sky">soft-sky</div>
<div class="glass sky">sky</div>
<div class="glass soft-blue">blue</div>
<div class="glass blue">blue</div>
<div class="glass soft-asphalt">soft-asphalt</div>
<div class="glass asphalt">asphalt</div>
<div class="glass soft-turquoise">soft-turquoise</div>
<div class="glass turquoise">turquoise</div>
<div class="glass soft-green">soft-green</div>
<div class="glass green">green</div>
<div class="glass soft-olive">soft-olive</div>
<div class="glass olive">olive</div>
								

http://hipertextos.github.io/src/css/styles.css

Materials (Soft metal)

.soft-metal + .[colorname]

Sample
white

soft

soft-grey

grey

hard-grey

black

soft-yellow

yellow

soft-amber

amber

soft-orange

orange

soft-red

red

soft-granate

granate

soft-brown

brown

soft-pink

pink

soft-magenta

magenta

soft-violet

violet

soft-sky

sky

soft-blue

blue

soft-asphalt

asphalt

soft-turquoise

turquoise

soft-green

green

soft-olive

olive


Markup
<!-- Snippets -->
<div class="soft-metal white">white</div>
<div class="soft-metal soft">soft</div>
<div class="soft-metal soft-grey">soft-grey</div>
<div class="soft-metal grey">grey</div>
<div class="soft-metal hard-grey">hard-grey</div>
<div class="soft-metal black">black</div>
<div class="soft-metal soft-yellow">soft-yellow</div>
<div class="soft-metal yellow">yellow</div>
<div class="soft-metal soft-amber">soft-amber</div>
<div class="soft-metal amber">amber</div>
<div class="soft-metal soft-orange">soft-orange</div>
<div class="soft-metal orange">orange</div>
<div class="soft-metal soft-red">soft-red</div>
<div class="soft-metal red">red</div>
<div class="soft-metal soft-granate">soft-granate</div>
<div class="soft-metal granate">granate</div>
<div class="soft-metal soft-brown">soft-brown</div>
<div class="soft-metal brown">brown</div>
<div class="soft-metal soft-pink">soft-pink</div>
<div class="soft-metal pink">pink</div>
<div class="soft-metal soft-magenta">soft-magenta</div>
<div class="soft-metal magenta">magenta</div>
<div class="soft-metal soft-violet">soft-violet</div>
<div class="soft-metal violet">violet</div>
<div class="soft-metal soft-sky">soft-sky</div>
<div class="soft-metal sky">sky</div>
<div class="soft-metal soft-blue">blue</div>
<div class="soft-metal blue">blue</div>
<div class="soft-metal soft-asphalt">soft-asphalt</div>
<div class="soft-metal asphalt">asphalt</div>
<div class="soft-metal soft-turquoise">soft-turquoise</div>
<div class="soft-metal turquoise">turquoise</div>
<div class="soft-metal soft-green">soft-green</div>
<div class="soft-metal green">green</div>
<div class="soft-metal soft-olive">soft-olive</div>
<div class="soft-metal olive">olive</div>
								

.metal + .[colorname]

Sample
white

soft

soft-grey

grey

hard-grey

black

soft-yellow

yellow

soft-amber

amber

soft-orange

orange

soft-red

red

soft-granate

granate

soft-brown

brown

soft-pink

pink

soft-magenta

magenta

soft-violet

violet

soft-sky

sky

soft-blue

blue

soft-asphalt

asphalt

soft-turquoise

turquoise

soft-green

green

soft-olive

olive


Markup
<!-- Snippets -->
<div class="metal white">white</div>
<div class="metal soft">soft</div>
<div class="metal soft-grey">soft-grey</div>
<div class="metal grey">grey</div>
<div class="metal hard-grey">hard-grey</div>
<div class="metal black">black</div>
<div class="metal soft-yellow">soft-yellow</div>
<div class="metal yellow">yellow</div>
<div class="metal soft-amber">soft-amber</div>
<div class="metal amber">amber</div>
<div class="metal soft-orange">soft-orange</div>
<div class="metal orange">orange</div>
<div class="metal soft-red">soft-red</div>
<div class="metal red">red</div>
<div class="metal soft-granate">soft-granate</div>
<div class="metal granate">granate</div>
<div class="metal soft-brown">soft-brown</div>
<div class="metal brown">brown</div>
<div class="metal soft-pink">soft-pink</div>
<div class="metal pink">pink</div>
<div class="metal soft-magenta">soft-magenta</div>
<div class="metal magenta">magenta</div>
<div class="metal soft-violet">soft-violet</div>
<div class="metal violet">violet</div>
<div class="metal soft-sky">soft-sky</div>
<div class="metal sky">sky</div>
<div class="metal soft-blue">blue</div>
<div class="metal blue">blue</div>
<div class="metal soft-asphalt">soft-asphalt</div>
<div class="metal asphalt">asphalt</div>
<div class="metal soft-turquoise">soft-turquoise</div>
<div class="metal turquoise">turquoise</div>
<div class="metal soft-green">soft-green</div>
<div class="metal green">green</div>
<div class="metal soft-olive">soft-olive</div>
<div class="metal olive">olive</div>
								

http://hipertextos.github.io/src/css/styles.css

Materials (plastic)

.soft-plastic + .[colorname]

Sample
white

soft

soft-grey

grey

hard-grey

black

soft-yellow

yellow

soft-amber

amber

soft-orange

orange

soft-red

red

soft-granate

granate

soft-brown

brown

soft-pink

pink

soft-magenta

magenta

soft-violet

violet

soft-sky

sky

soft-blue

blue

soft-asphalt

asphalt

soft-turquoise

turquoise

soft-green

green

soft-olive

olive


Markup
<!-- Snippets -->
<div class="soft-plastic white">white</div>
<div class="soft-plastic soft">soft</div>
<div class="soft-plastic soft-grey">soft-grey</div>
<div class="soft-plastic grey">grey</div>
<div class="soft-plastic hard-grey">hard-grey</div>
<div class="soft-plastic black">black</div>
<div class="soft-plastic soft-yellow">soft-yellow</div>
<div class="soft-plastic yellow">yellow</div>
<div class="soft-plastic soft-amber">soft-amber</div>
<div class="soft-plastic amber">amber</div>
<div class="soft-plastic soft-orange">soft-orange</div>
<div class="soft-plastic orange">orange</div>
<div class="soft-plastic soft-red">soft-red</div>
<div class="soft-plastic red">red</div>
<div class="soft-plastic soft-granate">soft-granate</div>
<div class="soft-plastic granate">granate</div>
<div class="soft-plastic soft-brown">soft-brown</div>
<div class="soft-plastic brown">brown</div>
<div class="soft-plastic soft-pink">soft-pink</div>
<div class="soft-plastic pink">pink</div>
<div class="soft-plastic soft-magenta">soft-magenta</div>
<div class="soft-plastic magenta">magenta</div>
<div class="soft-plastic soft-violet">soft-violet</div>
<div class="soft-plastic violet">violet</div>
<div class="soft-plastic soft-sky">soft-sky</div>
<div class="soft-plastic sky">sky</div>
<div class="soft-plastic soft-blue">blue</div>
<div class="soft-plastic blue">blue</div>
<div class="soft-plastic soft-asphalt">soft-asphalt</div>
<div class="soft-plastic asphalt">asphalt</div>
<div class="soft-plastic soft-turquoise">soft-turquoise</div>
<div class="soft-plastic turquoise">turquoise</div>
<div class="soft-plastic soft-green">soft-green</div>
<div class="soft-plastic green">green</div>
<div class="soft-plastic soft-olive">soft-olive</div>
<div class="soft-plastic olive">olive</div>
								

.plastic + .[colorname]

Sample
white

soft

soft-grey

grey

hard-grey

black

soft-yellow

yellow

soft-amber

amber

soft-orange

orange

soft-red

red

soft-granate

granate

soft-brown

brown

soft-pink

pink

soft-magenta

magenta

soft-violet

violet

soft-sky

sky

soft-blue

blue

soft-asphalt

asphalt

soft-turquoise

turquoise

soft-green

green

soft-olive

olive


Markup
<!-- Snippets -->
<div class="plastic white">white</div>
<div class="plastic soft">soft</div>
<div class="plastic soft-grey">soft-grey</div>
<div class="plastic grey">grey</div>
<div class="plastic hard-grey">hard-grey</div>
<div class="plastic black">black</div>
<div class="plastic soft-yellow">soft-yellow</div>
<div class="plastic yellow">yellow</div>
<div class="plastic soft-amber">soft-amber</div>
<div class="plastic amber">amber</div>
<div class="plastic soft-orange">soft-orange</div>
<div class="plastic orange">orange</div>
<div class="plastic soft-red">soft-red</div>
<div class="plastic red">red</div>
<div class="plastic soft-granate">soft-granate</div>
<div class="plastic granate">granate</div>
<div class="plastic soft-brown">soft-brown</div>
<div class="plastic brown">brown</div>
<div class="plastic soft-pink">soft-pink</div>
<div class="plastic pink">pink</div>
<div class="plastic soft-magenta">soft-magenta</div>
<div class="plastic magenta">magenta</div>
<div class="plastic soft-violet">soft-violet</div>
<div class="plastic violet">violet</div>
<div class="plastic soft-sky">soft-sky</div>
<div class="plastic sky">sky</div>
<div class="plastic soft-blue">blue</div>
<div class="plastic blue">blue</div>
<div class="plastic soft-asphalt">soft-asphalt</div>
<div class="plastic asphalt">asphalt</div>
<div class="plastic soft-turquoise">soft-turquoise</div>
<div class="plastic turquoise">turquoise</div>
<div class="plastic soft-green">soft-green</div>
<div class="plastic green">green</div>
<div class="plastic soft-olive">soft-olive</div>
<div class="plastic olive">olive</div>
								

http://hipertextos.github.io/src/css/liness.css

Colored buttons

.button + .lines + .[colorname]

Sample
Lines







Markup
<a class="button-icon l lines white" href="" title=""><b>A</b></a></div>
<a class="button-icon l lines soft" href="" title=""><b>A</b></a></div>
<a class="button-icon l lines soft-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l lines grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l lines hard-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l lines black" href="" title=""><b>A</b></a></div>

<a class="button-icon l lines soft-yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l lines yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l lines soft-amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l lines amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l lines soft-orange" href="" title=""><b>A</b></a></div>
<a class="button-icon l lines orange" href="" title=""><b>A</b></a></div>

<a class="button-icon l lines soft-red" href="" title=""><b>A</b></a></div>
<a class="button-icon l lines red" href="" title=""><b>A</b></a></div>
<a class="button-icon l lines soft-granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l lines granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l lines soft-brown" href="" title=""><b>A</b></a></div>
<a class="button-icon l lines brown" href="" title=""><b>A</b></a></div>

<a class="button-icon l lines soft-pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l lines pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l lines soft-magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l lines magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l lines soft-violet" href="" title=""><b>A</b></a></div>
<a class="button-icon l lines violet" href="" title=""><b>A</b></a></div>

<a class="button-icon l lines soft-sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l lines sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l lines soft-blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l lines blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l lines soft-asphalt" href="" title=""><b>A</b></a></div>
<a class="button-icon l lines asphalt" href="" title=""><b>A</b></a></div>

<a class="button-icon l lines soft-turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l lines turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l lines soft-green" href="" title=""><b>A</b></a></div>
<a class="button-icon l lines green" href="" title=""><b>A</b></a></div>
<a class="button-icon l lines soft-olive" href="" title=""><b>A</b></a></div>
<a class="button-icon l lines olive" href="" title=""><b>A</b></a></div>
								

.button + .line-all + .[colorname]

Sample
line-all







Markup
<a class="button-icon l line-all white" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-all soft" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-all soft-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-all grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-all hard-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-all black" href="" title=""><b>A</b></a></div>

<a class="button-icon l line-all soft-yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-all yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-all soft-amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-all amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-all soft-orange" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-all orange" href="" title=""><b>A</b></a></div>

<a class="button-icon l line-all soft-red" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-all red" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-all soft-granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-all granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-all soft-brown" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-all brown" href="" title=""><b>A</b></a></div>

<a class="button-icon l line-all soft-pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-all pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-all soft-magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-all magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-all soft-violet" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-all violet" href="" title=""><b>A</b></a></div>

<a class="button-icon l line-all soft-sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-all sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-all soft-blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-all blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-all soft-asphalt" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-all asphalt" href="" title=""><b>A</b></a></div>

<a class="button-icon l line-all soft-turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-all turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-all soft-green" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-all green" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-all soft-olive" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-all olive" href="" title=""><b>A</b></a></div>
								

.button + .line-top + .[colorname]

Sample
line-top







Markup
<a class="button-icon l line-top white" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-top soft" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-top soft-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-top grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-top hard-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-top black" href="" title=""><b>A</b></a></div>

<a class="button-icon l line-top soft-yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-top yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-top soft-amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-top amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-top soft-orange" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-top orange" href="" title=""><b>A</b></a></div>

<a class="button-icon l line-top soft-red" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-top red" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-top soft-granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-top granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-top soft-brown" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-top brown" href="" title=""><b>A</b></a></div>

<a class="button-icon l line-top soft-pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-top pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-top soft-magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-top magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-top soft-violet" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-top violet" href="" title=""><b>A</b></a></div>

<a class="button-icon l line-top soft-sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-top sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-top soft-blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-top blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-top soft-asphalt" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-top asphalt" href="" title=""><b>A</b></a></div>

<a class="button-icon l line-top soft-turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-top turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-top soft-green" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-top green" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-top soft-olive" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-top olive" href="" title=""><b>A</b></a></div>
								

.button + .line-bottom + .[colorname]

Sample
line-bottom







Markup
<a class="button-icon l line-bottom white" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-bottom soft" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-bottom soft-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-bottom grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-bottom hard-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-bottom black" href="" title=""><b>A</b></a></div>

<a class="button-icon l line-bottom soft-yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-bottom yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-bottom soft-amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-bottom amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-bottom soft-orange" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-bottom orange" href="" title=""><b>A</b></a></div>

<a class="button-icon l line-bottom soft-red" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-bottom red" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-bottom soft-granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-bottom granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-bottom soft-brown" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-bottom brown" href="" title=""><b>A</b></a></div>

<a class="button-icon l line-bottom soft-pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-bottom pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-bottom soft-magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-bottom magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-bottom soft-violet" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-bottom violet" href="" title=""><b>A</b></a></div>

<a class="button-icon l line-bottom soft-sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-bottom sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-bottom soft-blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-bottom blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-bottom soft-asphalt" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-bottom asphalt" href="" title=""><b>A</b></a></div>

<a class="button-icon l line-bottom soft-turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-bottom turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-bottom soft-green" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-bottom green" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-bottom soft-olive" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-bottom olive" href="" title=""><b>A</b></a></div>
								

.button + .line-left + .[colorname]

Sample
line-left







Markup
<a class="button-icon l line-left white" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-left soft" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-left soft-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-left grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-left hard-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-left black" href="" title=""><b>A</b></a></div>

<a class="button-icon l line-left soft-yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-left yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-left soft-amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-left amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-left soft-orange" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-left orange" href="" title=""><b>A</b></a></div>

<a class="button-icon l line-left soft-red" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-left red" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-left soft-granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-left granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-left soft-brown" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-left brown" href="" title=""><b>A</b></a></div>

<a class="button-icon l line-left soft-pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-left pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-left soft-magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-left magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-left soft-violet" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-left violet" href="" title=""><b>A</b></a></div>

<a class="button-icon l line-left soft-sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-left sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-left soft-blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-left blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-left soft-asphalt" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-left asphalt" href="" title=""><b>A</b></a></div>

<a class="button-icon l line-left soft-turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-left turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-left soft-green" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-left green" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-left soft-olive" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-left olive" href="" title=""><b>A</b></a></div>
								

.button + .line-right + .[colorname]

Sample
line-right







Markup
<a class="button-icon l line-right white" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-right soft" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-right soft-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-right grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-right hard-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-right black" href="" title=""><b>A</b></a></div>

<a class="button-icon l line-right soft-yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-right yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-right soft-amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-right amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-right soft-orange" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-right orange" href="" title=""><b>A</b></a></div>

<a class="button-icon l line-right soft-red" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-right red" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-right soft-granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-right granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-right soft-brown" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-right brown" href="" title=""><b>A</b></a></div>

<a class="button-icon l line-right soft-pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-right pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-right soft-magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-right magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-right soft-violet" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-right violet" href="" title=""><b>A</b></a></div>

<a class="button-icon l line-right soft-sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-right sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-right soft-blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-right blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-right soft-asphalt" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-right asphalt" href="" title=""><b>A</b></a></div>

<a class="button-icon l line-right soft-turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-right turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-right soft-green" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-right green" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-right soft-olive" href="" title=""><b>A</b></a></div>
<a class="button-icon l line-right olive" href="" title=""><b>A</b></a></div>
								

.button + .flat + .[colorname]

Sample
flat







Markup
<a class="button-icon l flat white" href="" title=""><b>A</b></a></div>
<a class="button-icon l flat soft" href="" title=""><b>A</b></a></div>
<a class="button-icon l flat soft-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l flat grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l flat hard-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l flat black" href="" title=""><b>A</b></a></div>

<a class="button-icon l flat soft-yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l flat yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l flat soft-amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l flat amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l flat soft-orange" href="" title=""><b>A</b></a></div>
<a class="button-icon l flat orange" href="" title=""><b>A</b></a></div>

<a class="button-icon l flat soft-red" href="" title=""><b>A</b></a></div>
<a class="button-icon l flat red" href="" title=""><b>A</b></a></div>
<a class="button-icon l flat soft-granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l flat granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l flat soft-brown" href="" title=""><b>A</b></a></div>
<a class="button-icon l flat brown" href="" title=""><b>A</b></a></div>

<a class="button-icon l flat soft-pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l flat pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l flat soft-magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l flat magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l flat soft-violet" href="" title=""><b>A</b></a></div>
<a class="button-icon l flat violet" href="" title=""><b>A</b></a></div>

<a class="button-icon l flat soft-sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l flat sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l flat soft-blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l flat blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l flat soft-asphalt" href="" title=""><b>A</b></a></div>
<a class="button-icon l flat asphalt" href="" title=""><b>A</b></a></div>

<a class="button-icon l flat soft-turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l flat turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l flat soft-green" href="" title=""><b>A</b></a></div>
<a class="button-icon l flat green" href="" title=""><b>A</b></a></div>
<a class="button-icon l flat soft-olive" href="" title=""><b>A</b></a></div>
<a class="button-icon l flat olive" href="" title=""><b>A</b></a></div>
								

.button + .dark + .[colorname]

Sample
dark







Markup
<a class="button-icon l dark white" href="" title=""><b>A</b></a></div>
<a class="button-icon l dark soft" href="" title=""><b>A</b></a></div>
<a class="button-icon l dark soft-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l dark grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l dark hard-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l dark black" href="" title=""><b>A</b></a></div>

<a class="button-icon l dark soft-yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l dark yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l dark soft-amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l dark amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l dark soft-orange" href="" title=""><b>A</b></a></div>
<a class="button-icon l dark orange" href="" title=""><b>A</b></a></div>

<a class="button-icon l dark soft-red" href="" title=""><b>A</b></a></div>
<a class="button-icon l dark red" href="" title=""><b>A</b></a></div>
<a class="button-icon l dark soft-granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l dark granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l dark soft-brown" href="" title=""><b>A</b></a></div>
<a class="button-icon l dark brown" href="" title=""><b>A</b></a></div>

<a class="button-icon l dark soft-pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l dark pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l dark soft-magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l dark magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l dark soft-violet" href="" title=""><b>A</b></a></div>
<a class="button-icon l dark violet" href="" title=""><b>A</b></a></div>

<a class="button-icon l dark soft-sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l dark sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l dark soft-blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l dark blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l dark soft-asphalt" href="" title=""><b>A</b></a></div>
<a class="button-icon l dark asphalt" href="" title=""><b>A</b></a></div>

<a class="button-icon l dark soft-turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l dark turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l dark soft-green" href="" title=""><b>A</b></a></div>
<a class="button-icon l dark green" href="" title=""><b>A</b></a></div>
<a class="button-icon l dark soft-olive" href="" title=""><b>A</b></a></div>
<a class="button-icon l dark olive" href="" title=""><b>A</b></a></div>
								

.button + .shading + .[colorname]

Sample
shading







Markup
<a class="button-icon l shading white" href="" title=""><b>A</b></a></div>
<a class="button-icon l shading soft" href="" title=""><b>A</b></a></div>
<a class="button-icon l shading soft-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l shading grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l shading hard-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l shading black" href="" title=""><b>A</b></a></div>

<a class="button-icon l shading soft-yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l shading yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l shading soft-amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l shading amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l shading soft-orange" href="" title=""><b>A</b></a></div>
<a class="button-icon l shading orange" href="" title=""><b>A</b></a></div>

<a class="button-icon l shading soft-red" href="" title=""><b>A</b></a></div>
<a class="button-icon l shading red" href="" title=""><b>A</b></a></div>
<a class="button-icon l shading soft-granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l shading granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l shading soft-brown" href="" title=""><b>A</b></a></div>
<a class="button-icon l shading brown" href="" title=""><b>A</b></a></div>

<a class="button-icon l shading soft-pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l shading pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l shading soft-magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l shading magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l shading soft-violet" href="" title=""><b>A</b></a></div>
<a class="button-icon l shading violet" href="" title=""><b>A</b></a></div>

<a class="button-icon l shading soft-sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l shading sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l shading soft-blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l shading blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l shading soft-asphalt" href="" title=""><b>A</b></a></div>
<a class="button-icon l shading asphalt" href="" title=""><b>A</b></a></div>

<a class="button-icon l shading soft-turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l shading turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l shading soft-green" href="" title=""><b>A</b></a></div>
<a class="button-icon l shading green" href="" title=""><b>A</b></a></div>
<a class="button-icon l shading soft-olive" href="" title=""><b>A</b></a></div>
<a class="button-icon l shading olive" href="" title=""><b>A</b></a></div>
								

.button + .depth + .[colorname]

Sample
depth







Markup
<a class="button-icon l depth white" href="" title=""><b>A</b></a></div>
<a class="button-icon l depth soft" href="" title=""><b>A</b></a></div>
<a class="button-icon l depth soft-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l depth grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l depth hard-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l depth black" href="" title=""><b>A</b></a></div>

<a class="button-icon l depth soft-yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l depth yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l depth soft-amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l depth amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l depth soft-orange" href="" title=""><b>A</b></a></div>
<a class="button-icon l depth orange" href="" title=""><b>A</b></a></div>

<a class="button-icon l depth soft-red" href="" title=""><b>A</b></a></div>
<a class="button-icon l depth red" href="" title=""><b>A</b></a></div>
<a class="button-icon l depth soft-granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l depth granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l depth soft-brown" href="" title=""><b>A</b></a></div>
<a class="button-icon l depth brown" href="" title=""><b>A</b></a></div>

<a class="button-icon l depth soft-pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l depth pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l depth soft-magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l depth magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l depth soft-violet" href="" title=""><b>A</b></a></div>
<a class="button-icon l depth violet" href="" title=""><b>A</b></a></div>

<a class="button-icon l depth soft-sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l depth sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l depth soft-blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l depth blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l depth soft-asphalt" href="" title=""><b>A</b></a></div>
<a class="button-icon l depth asphalt" href="" title=""><b>A</b></a></div>

<a class="button-icon l depth soft-turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l depth turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l depth soft-green" href="" title=""><b>A</b></a></div>
<a class="button-icon l depth green" href="" title=""><b>A</b></a></div>
<a class="button-icon l depth soft-olive" href="" title=""><b>A</b></a></div>
<a class="button-icon l depth olive" href="" title=""><b>A</b></a></div>
								

.button + .gloom + .[colorname]

Sample
gloom







Markup
<a class="button-icon l gloom white" href="" title=""><b>A</b></a></div>
<a class="button-icon l gloom soft" href="" title=""><b>A</b></a></div>
<a class="button-icon l gloom soft-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l gloom grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l gloom hard-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l gloom black" href="" title=""><b>A</b></a></div>

<a class="button-icon l gloom soft-yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l gloom yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l gloom soft-amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l gloom amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l gloom soft-orange" href="" title=""><b>A</b></a></div>
<a class="button-icon l gloom orange" href="" title=""><b>A</b></a></div>

<a class="button-icon l gloom soft-red" href="" title=""><b>A</b></a></div>
<a class="button-icon l gloom red" href="" title=""><b>A</b></a></div>
<a class="button-icon l gloom soft-granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l gloom granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l gloom soft-brown" href="" title=""><b>A</b></a></div>
<a class="button-icon l gloom brown" href="" title=""><b>A</b></a></div>

<a class="button-icon l gloom soft-pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l gloom pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l gloom soft-magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l gloom magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l gloom soft-violet" href="" title=""><b>A</b></a></div>
<a class="button-icon l gloom violet" href="" title=""><b>A</b></a></div>

<a class="button-icon l gloom soft-sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l gloom sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l gloom soft-blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l gloom blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l gloom soft-asphalt" href="" title=""><b>A</b></a></div>
<a class="button-icon l gloom asphalt" href="" title=""><b>A</b></a></div>

<a class="button-icon l gloom soft-turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l gloom turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l gloom soft-green" href="" title=""><b>A</b></a></div>
<a class="button-icon l gloom green" href="" title=""><b>A</b></a></div>
<a class="button-icon l gloom soft-olive" href="" title=""><b>A</b></a></div>
<a class="button-icon l gloom olive" href="" title=""><b>A</b></a></div>
								

.button + .shallow + .[colorname]

Sample
shallow







Markup
<a class="button-icon l shallow white" href="" title=""><b>A</b></a></div>
<a class="button-icon l shallow soft" href="" title=""><b>A</b></a></div>
<a class="button-icon l shallow soft-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l shallow grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l shallow hard-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l shallow black" href="" title=""><b>A</b></a></div>

<a class="button-icon l shallow soft-yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l shallow yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l shallow soft-amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l shallow amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l shallow soft-orange" href="" title=""><b>A</b></a></div>
<a class="button-icon l shallow orange" href="" title=""><b>A</b></a></div>

<a class="button-icon l shallow soft-red" href="" title=""><b>A</b></a></div>
<a class="button-icon l shallow red" href="" title=""><b>A</b></a></div>
<a class="button-icon l shallow soft-granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l shallow granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l shallow soft-brown" href="" title=""><b>A</b></a></div>
<a class="button-icon l shallow brown" href="" title=""><b>A</b></a></div>

<a class="button-icon l shallow soft-pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l shallow pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l shallow soft-magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l shallow magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l shallow soft-violet" href="" title=""><b>A</b></a></div>
<a class="button-icon l shallow violet" href="" title=""><b>A</b></a></div>

<a class="button-icon l shallow soft-sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l shallow sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l shallow soft-blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l shallow blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l shallow soft-asphalt" href="" title=""><b>A</b></a></div>
<a class="button-icon l shallow asphalt" href="" title=""><b>A</b></a></div>

<a class="button-icon l shallow soft-turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l shallow turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l shallow soft-green" href="" title=""><b>A</b></a></div>
<a class="button-icon l shallow green" href="" title=""><b>A</b></a></div>
<a class="button-icon l shallow soft-olive" href="" title=""><b>A</b></a></div>
<a class="button-icon l shallow olive" href="" title=""><b>A</b></a></div>
								

.button + .pastel + .[colorname]

Sample
pastel







Markup
<a class="button-icon l pastel white" href="" title=""><b>A</b></a></div>
<a class="button-icon l pastel soft" href="" title=""><b>A</b></a></div>
<a class="button-icon l pastel soft-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l pastel grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l pastel hard-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l pastel black" href="" title=""><b>A</b></a></div>

<a class="button-icon l pastel soft-yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l pastel yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l pastel soft-amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l pastel amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l pastel soft-orange" href="" title=""><b>A</b></a></div>
<a class="button-icon l pastel orange" href="" title=""><b>A</b></a></div>

<a class="button-icon l pastel soft-red" href="" title=""><b>A</b></a></div>
<a class="button-icon l pastel red" href="" title=""><b>A</b></a></div>
<a class="button-icon l pastel soft-granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l pastel granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l pastel soft-brown" href="" title=""><b>A</b></a></div>
<a class="button-icon l pastel brown" href="" title=""><b>A</b></a></div>

<a class="button-icon l pastel soft-pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l pastel pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l pastel soft-magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l pastel magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l pastel soft-violet" href="" title=""><b>A</b></a></div>
<a class="button-icon l pastel violet" href="" title=""><b>A</b></a></div>

<a class="button-icon l pastel soft-sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l pastel sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l pastel soft-blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l pastel blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l pastel soft-asphalt" href="" title=""><b>A</b></a></div>
<a class="button-icon l pastel asphalt" href="" title=""><b>A</b></a></div>

<a class="button-icon l pastel soft-turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l pastel turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l pastel soft-green" href="" title=""><b>A</b></a></div>
<a class="button-icon l pastel green" href="" title=""><b>A</b></a></div>
<a class="button-icon l pastel soft-olive" href="" title=""><b>A</b></a></div>
<a class="button-icon l pastel olive" href="" title=""><b>A</b></a></div>
								

.button + .black-hover + .[colorname]

Sample
black-hover







Markup
<a class="button-icon l black-hover white" href="" title=""><b>A</b></a></div>
<a class="button-icon l black-hover soft" href="" title=""><b>A</b></a></div>
<a class="button-icon l black-hover soft-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l black-hover grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l black-hover hard-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l black-hover black" href="" title=""><b>A</b></a></div>

<a class="button-icon l black-hover soft-yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l black-hover yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l black-hover soft-amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l black-hover amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l black-hover soft-orange" href="" title=""><b>A</b></a></div>
<a class="button-icon l black-hover orange" href="" title=""><b>A</b></a></div>

<a class="button-icon l black-hover soft-red" href="" title=""><b>A</b></a></div>
<a class="button-icon l black-hover red" href="" title=""><b>A</b></a></div>
<a class="button-icon l black-hover soft-granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l black-hover granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l black-hover soft-brown" href="" title=""><b>A</b></a></div>
<a class="button-icon l black-hover brown" href="" title=""><b>A</b></a></div>

<a class="button-icon l black-hover soft-pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l black-hover pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l black-hover soft-magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l black-hover magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l black-hover soft-violet" href="" title=""><b>A</b></a></div>
<a class="button-icon l black-hover violet" href="" title=""><b>A</b></a></div>

<a class="button-icon l black-hover soft-sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l black-hover sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l black-hover soft-blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l black-hover blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l black-hover soft-asphalt" href="" title=""><b>A</b></a></div>
<a class="button-icon l black-hover asphalt" href="" title=""><b>A</b></a></div>

<a class="button-icon l black-hover soft-turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l black-hover turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l black-hover soft-green" href="" title=""><b>A</b></a></div>
<a class="button-icon l black-hover green" href="" title=""><b>A</b></a></div>
<a class="button-icon l black-hover soft-olive" href="" title=""><b>A</b></a></div>
<a class="button-icon l black-hover olive" href="" title=""><b>A</b></a></div>
								

.button + .white-hover + .[colorname]

Sample
white-hover







Markup
<a class="button-icon l white-hover white" href="" title=""><b>A</b></a></div>
<a class="button-icon l white-hover soft" href="" title=""><b>A</b></a></div>
<a class="button-icon l white-hover soft-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l white-hover grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l white-hover hard-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l white-hover black" href="" title=""><b>A</b></a></div>

<a class="button-icon l white-hover soft-yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l white-hover yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l white-hover soft-amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l white-hover amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l white-hover soft-orange" href="" title=""><b>A</b></a></div>
<a class="button-icon l white-hover orange" href="" title=""><b>A</b></a></div>

<a class="button-icon l white-hover soft-red" href="" title=""><b>A</b></a></div>
<a class="button-icon l white-hover red" href="" title=""><b>A</b></a></div>
<a class="button-icon l white-hover soft-granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l white-hover granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l white-hover soft-brown" href="" title=""><b>A</b></a></div>
<a class="button-icon l white-hover brown" href="" title=""><b>A</b></a></div>

<a class="button-icon l white-hover soft-pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l white-hover pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l white-hover soft-magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l white-hover magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l white-hover soft-violet" href="" title=""><b>A</b></a></div>
<a class="button-icon l white-hover violet" href="" title=""><b>A</b></a></div>

<a class="button-icon l white-hover soft-sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l white-hover sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l white-hover soft-blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l white-hover blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l white-hover soft-asphalt" href="" title=""><b>A</b></a></div>
<a class="button-icon l white-hover asphalt" href="" title=""><b>A</b></a></div>

<a class="button-icon l white-hover soft-turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l white-hover turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l white-hover soft-green" href="" title=""><b>A</b></a></div>
<a class="button-icon l white-hover green" href="" title=""><b>A</b></a></div>
<a class="button-icon l white-hover soft-olive" href="" title=""><b>A</b></a></div>
<a class="button-icon l white-hover olive" href="" title=""><b>A</b></a></div>
								

.button + .hover-white + .[colorname]

Sample
hover-white







Markup
<a class="button-icon l hover-white white" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-white soft" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-white soft-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-white grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-white hard-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-white black" href="" title=""><b>A</b></a></div>

<a class="button-icon l hover-white soft-yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-white yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-white soft-amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-white amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-white soft-orange" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-white orange" href="" title=""><b>A</b></a></div>

<a class="button-icon l hover-white soft-red" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-white red" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-white soft-granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-white granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-white soft-brown" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-white brown" href="" title=""><b>A</b></a></div>

<a class="button-icon l hover-white soft-pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-white pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-white soft-magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-white magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-white soft-violet" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-white violet" href="" title=""><b>A</b></a></div>

<a class="button-icon l hover-white soft-sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-white sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-white soft-blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-white blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-white soft-asphalt" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-white asphalt" href="" title=""><b>A</b></a></div>

<a class="button-icon l hover-white soft-turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-white turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-white soft-green" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-white green" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-white soft-olive" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-white olive" href="" title=""><b>A</b></a></div>
								

.button + .hover-black + .[colorname]

Sample
hover-black







Markup
<a class="button-icon l hover-black white" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-black soft" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-black soft-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-black grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-black hard-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-black black" href="" title=""><b>A</b></a></div>

<a class="button-icon l hover-black soft-yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-black yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-black soft-amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-black amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-black soft-orange" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-black orange" href="" title=""><b>A</b></a></div>

<a class="button-icon l hover-black soft-red" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-black red" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-black soft-granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-black granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-black soft-brown" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-black brown" href="" title=""><b>A</b></a></div>

<a class="button-icon l hover-black soft-pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-black pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-black soft-magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-black magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-black soft-violet" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-black violet" href="" title=""><b>A</b></a></div>

<a class="button-icon l hover-black soft-sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-black sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-black soft-blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-black blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-black soft-asphalt" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-black asphalt" href="" title=""><b>A</b></a></div>

<a class="button-icon l hover-black soft-turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-black turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-black soft-green" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-black green" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-black soft-olive" href="" title=""><b>A</b></a></div>
<a class="button-icon l hover-black olive" href="" title=""><b>A</b></a></div>
								

.button + .soft-glass + .[colorname]

Sample
soft-glass







Markup
<a class="button-icon l soft-glass white" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-glass soft" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-glass soft-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-glass grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-glass hard-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-glass black" href="" title=""><b>A</b></a></div>

<a class="button-icon l soft-glass soft-yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-glass yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-glass soft-amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-glass amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-glass soft-orange" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-glass orange" href="" title=""><b>A</b></a></div>

<a class="button-icon l soft-glass soft-red" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-glass red" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-glass soft-granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-glass granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-glass soft-brown" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-glass brown" href="" title=""><b>A</b></a></div>

<a class="button-icon l soft-glass soft-pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-glass pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-glass soft-magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-glass magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-glass soft-violet" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-glass violet" href="" title=""><b>A</b></a></div>

<a class="button-icon l soft-glass soft-sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-glass sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-glass soft-blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-glass blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-glass soft-asphalt" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-glass asphalt" href="" title=""><b>A</b></a></div>

<a class="button-icon l soft-glass soft-turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-glass turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-glass soft-green" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-glass green" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-glass soft-olive" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-glass olive" href="" title=""><b>A</b></a></div>
								

.button + .glass + .[colorname]

Sample
glass







Markup
<a class="button-icon l glass white" href="" title=""><b>A</b></a></div>
<a class="button-icon l glass soft" href="" title=""><b>A</b></a></div>
<a class="button-icon l glass soft-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l glass grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l glass hard-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l glass black" href="" title=""><b>A</b></a></div>

<a class="button-icon l glass soft-yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l glass yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l glass soft-amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l glass amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l glass soft-orange" href="" title=""><b>A</b></a></div>
<a class="button-icon l glass orange" href="" title=""><b>A</b></a></div>

<a class="button-icon l glass soft-red" href="" title=""><b>A</b></a></div>
<a class="button-icon l glass red" href="" title=""><b>A</b></a></div>
<a class="button-icon l glass soft-granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l glass granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l glass soft-brown" href="" title=""><b>A</b></a></div>
<a class="button-icon l glass brown" href="" title=""><b>A</b></a></div>

<a class="button-icon l glass soft-pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l glass pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l glass soft-magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l glass magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l glass soft-violet" href="" title=""><b>A</b></a></div>
<a class="button-icon l glass violet" href="" title=""><b>A</b></a></div>

<a class="button-icon l glass soft-sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l glass sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l glass soft-blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l glass blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l glass soft-asphalt" href="" title=""><b>A</b></a></div>
<a class="button-icon l glass asphalt" href="" title=""><b>A</b></a></div>

<a class="button-icon l glass soft-turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l glass turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l glass soft-green" href="" title=""><b>A</b></a></div>
<a class="button-icon l glass green" href="" title=""><b>A</b></a></div>
<a class="button-icon l glass soft-olive" href="" title=""><b>A</b></a></div>
<a class="button-icon l glass olive" href="" title=""><b>A</b></a></div>
								

.button + .soft-metal + .[colorname]

Sample
soft-metal







Markup
<a class="button-icon l soft-metal white" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-metal soft" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-metal soft-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-metal grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-metal hard-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-metal black" href="" title=""><b>A</b></a></div>

<a class="button-icon l soft-metal soft-yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-metal yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-metal soft-amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-metal amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-metal soft-orange" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-metal orange" href="" title=""><b>A</b></a></div>

<a class="button-icon l soft-metal soft-red" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-metal red" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-metal soft-granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-metal granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-metal soft-brown" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-metal brown" href="" title=""><b>A</b></a></div>

<a class="button-icon l soft-metal soft-pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-metal pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-metal soft-magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-metal magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-metal soft-violet" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-metal violet" href="" title=""><b>A</b></a></div>

<a class="button-icon l soft-metal soft-sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-metal sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-metal soft-blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-metal blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-metal soft-asphalt" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-metal asphalt" href="" title=""><b>A</b></a></div>

<a class="button-icon l soft-metal soft-turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-metal turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-metal soft-green" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-metal green" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-metal soft-olive" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-metal olive" href="" title=""><b>A</b></a></div>
								

.button + .metal + .[colorname]

Sample
metal







Markup
<a class="button-icon l metal white" href="" title=""><b>A</b></a></div>
<a class="button-icon l metal soft" href="" title=""><b>A</b></a></div>
<a class="button-icon l metal soft-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l metal grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l metal hard-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l metal black" href="" title=""><b>A</b></a></div>

<a class="button-icon l metal soft-yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l metal yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l metal soft-amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l metal amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l metal soft-orange" href="" title=""><b>A</b></a></div>
<a class="button-icon l metal orange" href="" title=""><b>A</b></a></div>

<a class="button-icon l metal soft-red" href="" title=""><b>A</b></a></div>
<a class="button-icon l metal red" href="" title=""><b>A</b></a></div>
<a class="button-icon l metal soft-granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l metal granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l metal soft-brown" href="" title=""><b>A</b></a></div>
<a class="button-icon l metal brown" href="" title=""><b>A</b></a></div>

<a class="button-icon l metal soft-pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l metal pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l metal soft-magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l metal magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l metal soft-violet" href="" title=""><b>A</b></a></div>
<a class="button-icon l metal violet" href="" title=""><b>A</b></a></div>

<a class="button-icon l metal soft-sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l metal sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l metal soft-blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l metal blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l metal soft-asphalt" href="" title=""><b>A</b></a></div>
<a class="button-icon l metal asphalt" href="" title=""><b>A</b></a></div>

<a class="button-icon l metal soft-turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l metal turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l metal soft-green" href="" title=""><b>A</b></a></div>
<a class="button-icon l metal green" href="" title=""><b>A</b></a></div>
<a class="button-icon l metal soft-olive" href="" title=""><b>A</b></a></div>
<a class="button-icon l metal olive" href="" title=""><b>A</b></a></div>
								

.button + .soft-plastic + .[colorname]

Sample
soft-plastic







Markup
<a class="button-icon l soft-plastic white" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-plastic soft" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-plastic soft-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-plastic grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-plastic hard-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-plastic black" href="" title=""><b>A</b></a></div>

<a class="button-icon l soft-plastic soft-yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-plastic yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-plastic soft-amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-plastic amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-plastic soft-orange" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-plastic orange" href="" title=""><b>A</b></a></div>

<a class="button-icon l soft-plastic soft-red" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-plastic red" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-plastic soft-granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-plastic granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-plastic soft-brown" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-plastic brown" href="" title=""><b>A</b></a></div>

<a class="button-icon l soft-plastic soft-pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-plastic pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-plastic soft-magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-plastic magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-plastic soft-violet" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-plastic violet" href="" title=""><b>A</b></a></div>

<a class="button-icon l soft-plastic soft-sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-plastic sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-plastic soft-blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-plastic blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-plastic soft-asphalt" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-plastic asphalt" href="" title=""><b>A</b></a></div>

<a class="button-icon l soft-plastic soft-turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-plastic turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-plastic soft-green" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-plastic green" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-plastic soft-olive" href="" title=""><b>A</b></a></div>
<a class="button-icon l soft-plastic olive" href="" title=""><b>A</b></a></div>
								

.button + .plastic + .[colorname]

Sample
plastic







Markup
<a class="button-icon l plastic white" href="" title=""><b>A</b></a></div>
<a class="button-icon l plastic soft" href="" title=""><b>A</b></a></div>
<a class="button-icon l plastic soft-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l plastic grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l plastic hard-grey" href="" title=""><b>A</b></a></div>
<a class="button-icon l plastic black" href="" title=""><b>A</b></a></div>

<a class="button-icon l plastic soft-yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l plastic yellow" href="" title=""><b>A</b></a></div>
<a class="button-icon l plastic soft-amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l plastic amber" href="" title=""><b>A</b></a></div>
<a class="button-icon l plastic soft-orange" href="" title=""><b>A</b></a></div>
<a class="button-icon l plastic orange" href="" title=""><b>A</b></a></div>

<a class="button-icon l plastic soft-red" href="" title=""><b>A</b></a></div>
<a class="button-icon l plastic red" href="" title=""><b>A</b></a></div>
<a class="button-icon l plastic soft-granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l plastic granate" href="" title=""><b>A</b></a></div>
<a class="button-icon l plastic soft-brown" href="" title=""><b>A</b></a></div>
<a class="button-icon l plastic brown" href="" title=""><b>A</b></a></div>

<a class="button-icon l plastic soft-pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l plastic pink" href="" title=""><b>A</b></a></div>
<a class="button-icon l plastic soft-magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l plastic magenta" href="" title=""><b>A</b></a></div>
<a class="button-icon l plastic soft-violet" href="" title=""><b>A</b></a></div>
<a class="button-icon l plastic violet" href="" title=""><b>A</b></a></div>

<a class="button-icon l plastic soft-sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l plastic sky" href="" title=""><b>A</b></a></div>
<a class="button-icon l plastic soft-blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l plastic blue" href="" title=""><b>A</b></a></div>
<a class="button-icon l plastic soft-asphalt" href="" title=""><b>A</b></a></div>
<a class="button-icon l plastic asphalt" href="" title=""><b>A</b></a></div>

<a class="button-icon l plastic soft-turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l plastic turquoise" href="" title=""><b>A</b></a></div>
<a class="button-icon l plastic soft-green" href="" title=""><b>A</b></a></div>
<a class="button-icon l plastic green" href="" title=""><b>A</b></a></div>
<a class="button-icon l plastic soft-olive" href="" title=""><b>A</b></a></div>
<a class="button-icon l plastic olive" href="" title=""><b>A</b></a></div>