Button & List

Predefined Small Buttons

gold cyan purple brown rosy green pink blue yellow magenta orange red gray black white

<a class="button small gold" href="#"> <span> [...] <span> </a>
<a class="button small cyan" href="#"> <span> [...] <span> </a>
<a class="button small purple" href="#"> <span> [...] <span> </a>
<a class="button small brown" href="#"> <span> [...] <span> </a>
<a class="button small rosy" href="#"> <span> [...] <span> </a>
<a class="button small green" href="#"> <span> [...] <span> </a>
<a class="button small pink" href="#"> <span> [...] <span> </a>
<a class="button small blue" href="#"> <span> [...] <span> </a>
<a class="button small yellow" href="#"> <span> [...] <span> </a>
<a class="button small magenta" href="#"> <span> [...] <span> </a>
<a class="button small orange" href="#"> <span> [...] <span> </a>
<a class="button small red" href="#"> <span> [...] <span> </a>
<a class="button small gray" href="#"> <span> [...] <span> </a>
<a class="button small black" href="#"> <span> [...] <span> </a>
<a class="button small white" href="#"> <span> [...] <span> </a>

Predefined Medium Buttons

gold cyan purple brown rosy green pink blue yellow magenta orange red gray black white

<a class="button medium gold" href="#"> <span> [...] <span> </a>
<a class="button medium cyan" href="#"> <span> [...] <span> </a>
<a class="button medium purple" href="#"> <span> [...] <span> </a>
<a class="button medium brown" href="#"> <span> [...] <span> </a>
<a class="button medium rosy" href="#"> <span> [...] <span> </a>
<a class="button medium green" href="#"> <span> [...] <span> </a>
<a class="button medium pink" href="#"> <span> [...] <span> </a>
<a class="button medium blue" href="#"> <span> [...] <span> </a>
<a class="button medium yellow" href="#"> <span> [...] <span> </a>
<a class="button medium magenta" href="#"> <span> [...] <span> </a>
<a class="button medium orange" href="#"> <span> [...] <span> </a>
<a class="button medium red" href="#"> <span> [...] <span> </a>
<a class="button medium gray" href="#"> <span> [...] <span> </a>
<a class="button medium black" href="#"> <span> [...] <span> </a>
<a class="button medium white" href="#"> <span> [...] <span> </a>

Predefined Large Buttons

gold cyan purple brown rosy green pink blue yellow magenta orange red gray black white

<a class="button large gold" href="#"> <span> [...] <span> </a> 
<a class="button large cyan" href="#"> <span> [...] <span> </a> 
<a class="button large purple" href="#"> <span> [...] <span> </a> 
<a class="button large brown" href="#"> <span> [...] <span> </a> 
<a class="button large rosy" href="#"> <span> [...] <span> </a> 
<a class="button large green" href="#"> <span> [...] <span> </a> 
<a class="button large pink" href="#"> <span> [...] <span> </a> 
<a class="button large blue" href="#"> <span> [...] <span> </a> 
<a class="button large yellow" href="#"> <span> [...] <span> </a> 
<a class="button large magenta" href="#"> <span> [...] <span> </a> 
<a class="button large orange" href="#"> <span> [...] <span> </a> 
<a class="button large red" href="#"> <span> [...] <span> </a> 
<a class="button large gray" href="#"> <span> [...] <span> </a> 
<a class="button large black" href="#"> <span> [...] <span> </a> 
<a class="button large white" href="#"> <span> [...] <span> </a>

Circle List styles

<ul class="circle-list"> [...] </ul>

• Quis autem iure reprehenderit voluptate molestiae
• Et harum quidem rerum facilis est et expedita distinctio
• Temporibus autem quibusdam et aut officiis debitis

Arrow List styles

<ul class="arrow-list"> [...] </ul>

• Quis autem iure reprehenderit voluptate molestiae
• Et harum quidem rerum facilis est et expedita distinctio
• Temporibus autem quibusdam et aut officiis debitis

Green Arrow List styles

<ul class="greenarrow-list"> [...] </ul>

• Quis autem iure reprehenderit voluptate molestiae
• Et harum quidem rerum facilis est et expedita distinctio
• Temporibus autem quibusdam et aut officiis debitis

Check List styles

<ul class="check-list"> [...] </ul>

• Quis autem iure reprehenderit voluptate molestiae
• Et harum quidem rerum facilis est et expedita distinctio
• Temporibus autem quibusdam et aut officiis debitis

Delete List styles

<ul class="delete-list"> [...] </ul>

• Quis autem iure reprehenderit voluptate molestiae
• Et harum quidem rerum facilis est et expedita distinctio
• Temporibus autem quibusdam et aut officiis debitis

Star List styles

<ul class="star-list"> [...] </ul>

• Quis autem iure reprehenderit voluptate molestiae
• Et harum quidem rerum facilis est et expedita distinctio
• Temporibus autem quibusdam et aut officiis debitis

Number List styles

<ol> [...] </ol>

1. Quis autem iure reprehenderit voluptate molestiae
2. Et harum quidem rerum facilis est et expedita distinctio
3. Temporibus autem quibusdam et aut officiis debitis