Primer Marketing CSS Buttons

Buttons are used for actions, like in forms, while textual hyperlinks are used for destinations, or moving from one page to another.

This repository is a module of the full primer-css repository.

Documentation

Marketing buttons extend primer-core buttons with more color and fill styles.

Colors

Marketing buttons are available in orange, purple, and green.

<button class="btn btn-orange" type="button">Button button</button>
<a class="btn btn-purple" href="#url" role="button">Link button</a>
<a class="btn btn-green" href="#url" role="button">Link button</a>

Outline button colors

The btn-outline has also been extended with the marketing color palette in orange, purple, and green.

<button class="btn btn-outline-orange" type="button">Button button</button>
<a class="btn btn-outline-purple" href="#url" role="button">Link button</a>
<button class="btn btn-outline-green" type="button">Button button</button>

Transparent button

A button can also be transparent and displayed with a white border with btn-transparent.

<div class="bg-gray-dark p-4 mt-4">
  <button class="btn btn-transparent" type="button">
    Button button
  </button>
</div>

Install

This repository is distributed with npm. After installing npm, you can install primer-marketing-buttons with this command.

$ npm install --save primer-marketing-buttons

Usage

The source files included are written in Sass (scss) You can simply point your sass include-path at your node_modules directory and import it like this.

@import "primer-marketing-buttons/index.scss";

You can also import specific portions of the module by importing those partials from the /lib/ folder. Make sure you import any requirements along with the modules.

Build

For a compiled css version of this module, a npm script is included that will output a css version to build/build.css

$ npm run build

2.7 KiB Raw Blame History