The Pacific Asian Center for Entrepreneurship

You are here

Example Page – Buttons

A reference guide to buttons

This page contains sample code that you can copy and paste into other pages to make button links. Remember you need to click the "Source" view in the WYSIWYG editor for it to work correctly

Notes

  • All of the buttons need to be surrounded by a div with the class of “button__container”.
  • Then add keywords for color. Options are: green, blue, tan, bic, pir, vpir
  • Last add keywords for layout (width). The options are: col-1, col-2, and col-3.

Code Snippet

<div class="button__container green col-1">
    <p class="button"><a href="http://pace.shidler.hawaii.edu/">Pacific…</a></p>
    <p class="button"><a href="http://shidler.hawaii.edu/">Shidler…</a></p>
</div>

col-1: This means the space is divided into just 1 column, i.e. full width.

Result

Code Snippet

<div class="button__container green col-2">
    <p class="button"><a href="http://pace.shidler.hawaii.edu/">PACE</a></p>
    <p class="button"><a href="http://shidler.hawaii.edu/">Shidler</a></p>
</div>

col-2: This means the space is divided into 2 columns.

Result

Code Snippet

<div class="button__container blue col-2">
    <p class="button"><a href="http://pace.shidler.hawaii.edu/">PACE</a></p>
    <p class="button"><a href="http://shidler.hawaii.edu/">Shidler</a></p>
</div>

blue: Hey look the buttons are blue now!

Result

Code Snippet

<div class="button__container blue col-3">
    <p class="button"><a href="http://pace.shidler.hawaii.edu/">PACE</a></p>
    <p class="button"><a href="http://shidler.hawaii.edu/">Shidler</a></p>
    <p class="button"><a href="https://manoa.hawaii.edu/">UH Mānoa</a></p>
</div>

col-3: This means the space is divided into 3 columns.

Result

Code Snippet

<div class="button__container tan col-2">
    <p class="button"><a href="http://pace.shidler.hawaii.edu/">PACE</a></p>
</div>

col-2: Note you can divide the space into 2 columns but still just have 1 button.

Result

Code Snippet

<div class="button__container tan col-3">
    <p class="button"><a href="http://shidler.hawaii.edu/">Shidler</a></p>
</div>

col-3: Note you can divide the space into 3 columns but still just have 1 button.

Result

Code Snippet

<div class="button__container bic col-3">
    <p class="button"><a href="http://pace.shidler.hawaii.edu/">PACE</a></p>
    <p class="button"><a href="http://shidler.hawaii.edu/">Shidler</a></p>
    <p class="button"><a href="https://manoa.hawaii.edu/">UH Mānoa</a></p>
</div>

bic: Breakthrough Innovation Challenge

Result

Code Snippet

<div class="button__container pir col-2">
    <p class="button"><a href="http://pace.shidler.hawaii.edu/">PACE</a></p>
    <p class="button"><a href="http://shidler.hawaii.edu/">Shidler</a></p>
</div>

pir: Professional-in-Residence

Result

Code Snippet

<div class="button__container vpir col-2">
    <p class="button"><a href="http://pace.shidler.hawaii.edu/">PACE</a></p>
    <p class="button"><a href="http://shidler.hawaii.edu/">Shidler</a></p>
</div>

vpir: Virtual Professional-in-Residence

Result