Creating and styling buttons

Prelude Lite includes optional custom form styling, including buttons. You can use these styles for any form you are creating, but you can also make text links into buttons. Current button styling:

Making a Button

The code below can be used by copying and pasting into your page content. The “Expanded Button” will stretch 100% to the container it sits in.

Tiny Button

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

Small Button

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

Default Button

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

Large Button

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

Expanded (wide) Button

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

Border Button

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

Customize the Button Colour

You can customize the colour of buttons in the theme’s customizer if you want something different. The default colour is the aqua green you see above.

  1. Go to Appearance >> Customize >> Colours
  2. Look for the “Button Colour” settings and use the selectors to change the colours
  3. Click “Save & Puiblish