Button Style Guide

It is very easy to create different button styles in Jobify to be used in widgets, post/page content, etc. Standard buttons use the Primary Color set in Customize → Colors → Global.

Create a base button:

<a href="#" class="button">Button</a><br> 

Use the class name examples below to modify the appearance of the button:

Size: Small

<a href="#" class="button button--size-small">Button</a> 

Size: Medium

<a href="#" class="button button--size-medium">Button</a> 

Size: Standard

<a href="#" class="button">Button</a> 

Size: Full Width

<a href="#" class="button button--size-full">Button</a> 

Type: Inverted

<a href="#" class="button button--type-inverted">Button</a> 

Type: Action

Uses the Accent Color in Customize → Colors → Global and is inverted.

<a href="#" class="button button--type-action">Button</a> 

Color: White

<a href="#" class="button button--color-white">Button</a> 

Color & Type: White Inverted

<a href="#" class="button button--color-white button--type-inverted">Button</a> 

Was this article helpful?

Related Articles