Acid
<a class="button button-acid button-lighttext button-large" href="#">Acid</a>
Blue
<a class="button button-blue button-lighttext button-large" href="#">Blue</a>
Red
<a class="button button-red button-lighttext button-large" href="#">Red</a>
Green
<a class="button button-green button-large" href="#">Green</a>
Purple
<a class="button button-purple button-lighttext button-large" href="#">Purple</a>
Grey
<a class="button button-grey button-lighttext button-large" href="#">Grey</a>
<a class="button button-acid button-lighttext button-large" href="#">Acid</a>
Blue
<a class="button button-blue button-lighttext button-large" href="#">Blue</a>
Red
<a class="button button-red button-lighttext button-large" href="#">Red</a>
Green
<a class="button button-green button-large" href="#">Green</a>
Purple
<a class="button button-purple button-lighttext button-large" href="#">Purple</a>
Grey
<a class="button button-grey button-lighttext button-large" href="#">Grey</a>
Full Width Buttons Using an "Anchor" or "a" tag
You can make Full Width buttons simply by adding "button-full" to the class of a particular buttons html.
<a class="button button-acid button-lighttext button-large button-full" href="#">This button will be the full width of the container</a>This button will be the full width of the container
<a class="button button-blue button-lighttext button-large button-full" href="#">This button will be the full width of the container</a>
This button will be the full width of the container <a class="button button-red button-lighttext button-large button-full" href="#">This button will be the full width of the container</a>
This button will be the full width of the container <a class="button button-green button-lighttext button-large button-full" href="#">This button will be the full width of the container</a>
This button will be the full width of the container <a class="button button-purple button-lighttext button-large button-full" href="#">This button will be the full width of the container</a>
This button will be the full width of the container <a class="button button-grey button-lighttext button-large button-full" href="#">This button will be the full width of the container</a>
This button will be the full width of the container
Standard Buttons Using the "Button" tag
The purpose of this page is to show you how the Apogee design will look when using some of the built-in elements
This is a Check list
<ul class="bullet-check">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Cras vitae ipsum eget mauris commodo viverra.</li>
<li>Donec sed nisl justo, ut scelerisque lacus.</li>
<li>Donec rhoncus mauris ante porta at ornare magna tincidunt.</li>
</ul>
This is a Arrow list
<ul class="bullet-arrow">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Cras vitae ipsum eget mauris commodo viverra.</li>
<li>Donec sed nisl justo, ut scelerisque lacus.</li>
<li>Donec rhoncus mauris dapibus ante porta at ornare magna tincidunt.</li>
</ul>
This is a Star list
<ul class="bullet-star">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Cras vitae ipsum eget mauris commodo viverra.</li>
<li>Donec sed nisl justo, ut scelerisque lacus.</li>
<li>Donec rhoncus mauris dapibus ante porta at ornare magna tincidunt.</li>
</ul>
This is a Plus list
<ul class="bullet-plus">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Cras vitae ipsum eget mauris commodo viverra.</li>
<li>Donec sed nisl justo, ut scelerisque lacus.</li>
<li>Donec rhoncus mauris dapibus ante porta at ornare magna tincidunt.</li>
</ul>
This is a Circle list
<ul class="bullet-circle">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Cras vitae ipsum eget mauris commodo viverra.</li>
<li>Donec sed nisl justo, ut scelerisque lacus.</li>
<li>Donec rhoncus mauris dapibus ante porta at ornare magna tincidunt.</li>
</ul>
This is a Bulleted list
<ul class="bulleted">
<li>Duis aute irure dolor in reprehenderit in velit esse. </li>
<li>Excepteur occaecat cupidatat non proident, sunt in culpa. </li>
<li>Lorem ipsum dolor amet, consectetur adipisicing elit.</li>
<li>Sed do eiusmod tempor incididunt et dolore magna aliqua. </li>
</ul>