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

The buttons on our marketing pages are based on Primer's core with the addition of more color options, color outline buttons, a transparent button, and larger button sizes.

Color

The btn has been extended with the marketing color palette:


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

Outline buttons

The btn-outline has also been extended with the marketing color palette:


<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>
<div class="bg-gray-dark p-4 mt-4">
  <button class="btn btn-transparent" type="button">
    Button button
    <span class="Counter">12</span>
  </button>
</div>

Additional sizing

There are cases where you might want to increase the size of a button, for example when putting a main CTA inside of a jumbotron or major page callout. The btn-large class does the following to make a button more prominent:

Adds extra additional padding in ems so that the padding scales proportionately with the font-size
Increases the border radius to 6px

It can optionally be used in combination with a font-size utility (like f3) on the parent to increase the font-size.


<p class="f3">
  <a class="btn btn-large btn-purple" href="#url" role="button">Large link button</a>
  <button class="btn btn-large btn-outline-blue" type="button">Large button button</button>
</p>

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

3.4 KiB Raw Blame History