buttons.html

<div style="width: 98%; max-width: 1000px;">
    <h2 style="border-bottom: 2px solid #dc4405; font-size: 18pt; margin-top: 0px; margin-bottom: 12px;">Add an Icon to Your Buttons</h2>
    <p><a class="icon-Line icon-edit btn btn-primary">Edit</a></p>
    <p><a class="icon-Line icon-trash btn btn-primary">Delete</a></p>
    <h2 style="border-bottom: 2px solid #dc4405; font-size: 18pt; margin-top: 0px; margin-bottom: 12px;">Buttons with Rounded Corners</h2>
    <p>The buttons below use a <code style="color: black; background-color: #eeeeff;">style="border-radius"</code> to accomplish rounded buttons:</p>
    <p><a class="btn" style="border-radius: 50%; background-color: green; color: #ffffff;" href="https://en.wikipedia.org/wiki/Button">Go!</a></p>
    <p><a class="btn" style="border-radius: 2px;" href="https://en.wikipedia.org/wiki/Button">2 px</a></p>
    <p><a class="btn" style="border-radius: 4px;" href="https://en.wikipedia.org/wiki/Button">4 px</a></p>
    <p><a class="btn" style="border-radius: 8px;" href="https://en.wikipedia.org/wiki/Button">8 px</a></p>
    <p><a class="btn" style="border-radius: 12px;" href="https://en.wikipedia.org/wiki/Button">12 px</a></p>
</div>
<h2 style="border-bottom: 2px solid #dc4405; font-size: 18pt; margin-top: 12px; margin-bottom: 12px; clear: both;">more styles</h2>
<p>An experiment to see how many styles I can throw at a button:</p>
<p><a class="btn" style="background: linear-gradient(to bottom, #007dc1 5%, #0061a7 100%); background-color: #007dc1; border-radius: 3px; border: 1px solid #124d77; display: inline-block; color: #ffffff; font-family: serif; font-size: 18px; padding: 6px 24px; text-decoration: none;" href="https://en.wikipedia.org/wiki/Button">Styled Button</a></p>
<h2 style="border-bottom: 2px solid #dc4405; font-size: 18pt; margin-top: 12px; margin-bottom: 12px;">A List of Buttons</h2>
<ul style="list-style: none;">
    <li><a class="btn" href="https://en.wikipedia.org/wiki/Button">Syllabus</a></li>
    <li><a class="btn" href="https://en.wikipedia.org/wiki/Button">Announcmements</a></li>
    <li><a class="btn" href="https://en.wikipedia.org/wiki/Button">Assignments</a></li>
    <li><a class="btn" href="https://en.wikipedia.org/wiki/Button">Discussions</a></li>
</ul>
<hr />
<p>Each button in the below list has a <code>style="float:left;"</code> to the individual list items, to make it align horizontally.</p>
<ul style="list-style: none;">
    <li style="float: left;"><a class="btn" style="color: white; background-color: black;" href="https://en.wikipedia.org/wiki/Button">Syllabus</a></li>
    <li style="float: left;"><a class="btn" style="color: white; background-color: black;" href="https://en.wikipedia.org/wiki/Button">Announcmements</a></li>
    <li style="float: left;"><a class="btn" style="color: white; background-color: black;" href="https://en.wikipedia.org/wiki/Button">Assignments</a></li>
    <li style="float: left;"><a class="btn" style="color: white; background-color: black;" href="https://en.wikipedia.org/wiki/Button">Discussions</a></li>
</ul>
<p>&nbsp;</p>