Ground Floor

Basic styling for out-of-the-box NeoCities.org websites

Show Code

Button Classes

A break down of the different button types available through this framework.

Colors / Actions

The basic .btn sets up the general foundation of all button styling.

  • .btn
  • .btn-negative
  • .btn-disable
  • .btn-action
  • .btn-action-2
  • .btn-action-3

The hover states for .btn-action 1-3 use sass to darken the base color by 15%. Change this in the _button.scss.

These coloring classes all extend the .btn class, so they can be used by themselves as long as you only require a normal button size. Use them as helper classes to style other .btn types.

The code is right here

HTML

<a class="btn">
  Button Text
</a>

<a class="btn-action">
  Button Text
</a>

<a class="btn-large btn-action-2">
  Button Text
</a>

Sizes

There are four basic sizes for buttons. small, large and xLarge all extend the .btn class.

.btn-wide is a helper class, so it will need to be paired with a .btn class on the HTML element.

  • .btn-small
  • .btn (default class)
  • .btn-large
  • .btn-xlarge
  • .btn-wide

The code is right here

HTML

<a class="btn">
  Button Text
</a>

<a class="btn-wide">
  Button Text
</a>

<a class="btn-large btn-wide btn-action">
  Button Text
</a>

Padding Helper Classes

Using the .btn-pad along with a normal button class will increase the padding on (at least) the left and right sides of the button.

The .btn-pad class is reused as a selector in each for each of the different button sizings.

The code is right here

HTML

<a class="btn-small btn-pad">
  Button Text
</a>