Buttons are the main thing that move the interface. That's why it was the main thing that was developed for Puppertino.
Puppertino buttons support usage as links, buttons and submit elements.

Push Buttons.

Push buttons come in different variations according to your needings. It can be used as <a> elements or <button> elements. For buttons, is suggested that you use the attribute disabled if you desire to disable them.

Primary Btn mob Rounded Outline Outline dashed Custom action


<a href="#" class="p-btn">Default</a>

<a href="#" class="p-btn p-btn-disabled">Disabled</a>

<a href="#" class="p-btn p-prim-col">Primary</a>

<a href="#" class="p-btn p-btn-mob">Btn mob</a>

<a href="#" class="p-btn p-btn-round">Rounded</a>

<a href="#" class="p-btn p-btn-more">Custom action</a>

Button colors

Color customization in buttons is pretty simple. You will need to have the class p-btn-mob to disable the shadow and border of the button.

You can use the colors available in Color palette or custom colors defined in your own CSS.


<button class="p-btn p-btn-mob p-lime p-white-color p-white-color">Success</button>

<button class="p-btn p-btn-mob p-orange p-white-color p-white-color">Danger</button>

<button class="p-btn p-btn-mob p-strawberry p-white-color p-white-color">Error</button>

Button sizing

Button sizing was a very requested feature during the alpha version of Puppertino. So now, I'm bringin 4 sizes for button sizes:

Small size Medium size Large size Block size


<a href="#" class="p-btn p-btn-sm">Small size</a>

<a href="#" class="p-btn p-btn-md">Medium size</a>

<a href="#" class="p-btn p-btn-lg">Large size</a>

<a href="#" class="p-btn p-btn-lg p-btn-block">Block size</a>

Direction buttons.

Direction buttons are used to navigate across your app, and usage is really simple, just use p-btn-direction as a base and p-btn-d-back for back navigation and p-btn-d-next for forward navigation.

Prev Next


<a href="#" class="p-btn-direction p-btn-d-back">Prev</a>

<a href="#" class="p-btn-direction p-btn-d-next">Next</a>

Icon button.

The icon button (Before help button), is round button with an icon inside, you can use a letter, an icon based in fonts (Such as Font Awesome) or an SVG. For icons see icons section.

You can set the color of the borders and icon by just changing the color property of the button or by adding the classes present in Color palette. You can also disable borders by adding p-btn-icon-no-border

? 🐶


<a href="#" class="p-btn-icon">?</a>

<a href="#" class="p-btn-icon"><!-- SVG ICON HERE --></a>

<a href="#" class="p-btn-icon p-mint p-silver-100-color">Custom Color</a>

Scope buttons.

Scope buttons are similar to Push buttons, but these are supposed to be used on routes, and should not replace normal buttons.
The Default/Active button is meant to indicate the current route that the user is in. While the Unactive button is supposed to be used in the route before the current one. And the Action Button is supposed to indicate any action that the user can do in that route, like save, copy or others.

Default/Active Unactive Disabled Action Action


<a href="#" class="p-btn p-btn-scope">Default/Active</a>

<a href="#" class="p-btn p-btn-scope p-btn-scope-unactive">Unactive</a>

<a href="#" class="p-btn p-btn-scope p-btn-disabled">Disabled</a>

<a href="#" class="p-btn p-btn-scope p-btn-scope-outline">Action</a>