HPUCSS Framework

Default Button

Standard appearance and behavior of buttons rendered with pre-applied basic styles.

HTML


<button class="hpu-btn" type="button">
    The Default Button
</button>

Colored Buttons

Featuring distinct background colors, enhancing their visual prominence within a user interface. HPU Colored buttons are customized with specific background hues to align with HPU's branding guidelines: .hpu-btn .btn-bg-{color-name}

Primary Colors:

Secondary Colors:

HTML


<!-- Primary Colors: -->
<button class="hpu-btn btn-bg-1st" type="button">Teal</button>
<button class="hpu-btn btn-bg-2nd" type="button">Light Teal</button>
<button class="hpu-btn btn-bg-black" type="button">Black</button>
<button class="hpu-btn btn-bg-white" type="button">White</button>

<!-- Secondary Colors: -->
<button class="hpu-btn btn-bg-3rd" type="button">Blue Gray</button>
<button class="hpu-btn btn-bg-4th" type="button">Ocean Blue</button>
<button class="hpu-btn btn-bg-5th" type="button">Dark Blue</button>
<button class="hpu-btn btn-bg-6th" type="button">Warm Sun</button>
<button class="hpu-btn btn-bg-7th" type="button">Leaf Green</button>
<button class="hpu-btn btn-bg-8th" type="button">Sunset</button>
<button class="hpu-btn btn-bg-dark-gray" type="button">Dark Gray</button>
<button class="hpu-btn btn-bg-gray" type="button">Gray</button>
<button class="hpu-btn btn-bg-success" type="button">Success</button>
<button class="hpu-btn btn-bg-warning" type="button">Warning</button>

Outlined Button Styles

Button design where the button's outline is emphasized, typically by removing the background color and applying a border around the button's perimeter. On hover and active states, the buttons' background are filled depending on which color was selected.

Primary Colors:

Secondary Colors:

HTML


<!-- Primary Colors: -->
<button class="hpu-btn btn-outline-1st" type="button">Teal</button>
<button class="hpu-btn btn-outline-2nd" type="button">Light Teal</button>
<button class="hpu-btn btn-outline-black" type="button">Black</button>
<button class="hpu-btn btn-outline-white" type="button">White</button>

<!-- Secondary Colors: -->
<button class="hpu-btn btn-outline-3rd" type="button">Blue Gray</button>
<button class="hpu-btn btn-outline-4th" type="button">Ocean Blue</button>
<button class="hpu-btn btn-outline-5th" type="button">Dark Blue</button>
<button class="hpu-btn btn-outline-6th" type="button">Warm Sun</button>
<button class="hpu-btn btn-outline-7th" type="button">Leaf Green</button>
<button class="hpu-btn btn-outline-8th" type="button">Sunset</button>
<button class="hpu-btn btn-outline-dark-gray" type="button">Dark Gray</button>
<button class="hpu-btn btn-outline-gray" type="button">Gray</button>
<button class="hpu-btn btn-outline-success" type="button">Success</button>
<button class="hpu-btn btn-outline-warning" type="button">Warning</button>

Blimp Buttons

Simply add the .btn-blimp class to either the solid or outlined buttons.

Primary Solid Buttons:

Secondary Outline Buttons:

HTML


<!-- Primary Solid Buttons: -->
<button class="hpu-btn btn-blimp btn-bg-1st" type="button">Teal</button>
<button class="hpu-btn btn-blimp btn-bg-2nd" type="button">Light Teal</button>
<button class="hpu-btn btn-blimp btn-bg-black" type="button">Black</button>
<button class="hpu-btn btn-blimp btn-bg-white" type="button">White</button>

<!-- Secondary Outline Buttons: -->
<button class="hpu-btn btn-blimp btn-outline-3rd" type="button">Blue Gray</button>
<button class="hpu-btn btn-blimp btn-outline-4th" type="button">Ocean Blue</button>
<button class="hpu-btn btn-blimp btn-outline-5th" type="button">Dark Blue</button>
<button class="hpu-btn btn-blimp btn-outline-6th" type="button">Warm Sun</button>
<button class="hpu-btn btn-blimp btn-outline-7th" type="button">Leaf Green</button>
<button class="hpu-btn btn-blimp btn-outline-8th" type="button">Sunset</button>
<button class="hpu-btn btn-blimp btn-outline-dark-gray" type="button">Dark Gray</button>
<button class="hpu-btn btn-blimp btn-outline-gray" type="button">Gray</button>
<button class="hpu-btn btn-blimp btn-outline-success" type="button">Success</button>
<button class="hpu-btn btn-blimp btn-outline-warning" type="button">Warning</button>

Button Styles Across Other Tags

Button classes defined above can also be used for <a> and <input> tags as well.

NOTE: When using <a> tag, please add the role="button" attribute to appropriately convey its purpose to assistive devices.

Colored Buttons:

Link

Outline Buttons:

Link

HTML


<!-- Colored: -->
<a href="..." class="hpu-btn btn-bg-1st" role="button">Link</a>
<input class="hpu-btn btn-bg-2nd" type="button" value="Input" />
<input class="hpu-btn btn-bg-3rd" type="submit" value="Submit" />
<input class="hpu-btn btn-bg-4th" type="reset" value="Reset" />

<!-- Outline: -->
<a href="..." class="hpu-btn btn-outline-1st" role="button">Link</a>
<input class="hpu-btn btn-outline-2nd" type="button" value="Input" />
<input class="hpu-btn btn-outline-3rd" type="submit" value="Submit" />
<input class="hpu-btn btn-outline-4th" type="reset" value="Reset" />

Button Sizes

Button variations in the dimensions created range from small (.btn-sm) to large (.btn-lg), offering size flexibility.

HTML


<button class="hpu-btn btn-sm btn-bg-success" type="button">Small</button>
<button class="hpu-btn btn-bg-6th" type="button">Default</button>
<button class="hpu-btn btn-lg btn-bg-warning" type="button">Large</button>

Responsive variations for button sizes are also available: .hpu-btn .btn-{size}-{screen}

.hpu-btn .btn-sm

.hpu-btn .btn-sm-sm

.hpu-btn .btn-sm-md

.hpu-btn .btn-sm-lg

.hpu-btn .btn-sm-xl

.hpu-btn .btn-sm-xxl

.hpu-btn .btn-lg

.hpu-btn .btn-lg-sm

.hpu-btn .btn-lg-md

.hpu-btn .btn-lg-lg

.hpu-btn .btn-lg-xl

.hpu-btn .btn-lg-xxl

Block Buttons

Create a full width button using .hpu-d-flex .flex-col wrap.

HTML


<div class="hpu-d-flex flex-col">
    <button class="hpu-btn btn-bg-1st" type="button">Block Button</button>
</div>

Since the block button is using .hpu-d-flex, we can make the button width to be responsive. Please refer to HPUCSS Flex Guides for usage info.

CURRENT SCREEN SIZE: xs sm md lg xl xxl

HTML


<div class="hpu-d-flex flex-col flex-row-lg">
    <button class="hpu-btn btn-bg-1st" type="button">Block Button</button>
</div>

Want a block button but not full width? You can do this by utilizing .hpu-row and make it responsive with .col-{screen}-{1 - 12}. Please refer to HPUCSS Grid System for usage info.

In the example below, .hpu-mx-auto is used to center the button.

Lastly, the button will span 100% of the container width on mobile devices.

CURRENT SCREEN SIZE: xs sm md lg xl xxl

HTML


<div class="hpu-row">
    <div class="col-lg-6 hpu-d-flex flex-col hpu-mx-auto">
        <button class="hpu-btn btn-bg-1st" type="button">Block Button</button>
    </div>
</div>

Waves Feedback

Add a wave effect feedback to every click on a button by adding .waves-effect class.

HTML


<button class="hpu-btn waves-effect" type="button">Click To Wave</button>

Applying colors to the waves effect is also possible! Simply use the .hpu-waves-{color} classes alongside the .waves-effect. Please refer to HPUCSS Colors for usage guides.

HTML


<button class="hpu-btn waves-effect hpu-waves-1st" type="button">Teal Waves</button>
<button class="hpu-btn waves-effect hpu-waves-3rd" type="button">Blue Gray Waves</button>
<button class="hpu-btn waves-effect hpu-waves-5th" type="button">Blue Waves</button>