primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-18 19:51:37 +03:00
Code Issues Projects Releases Wiki Activity
a09c6573bb
css/modules/primer-marketing-buttons
History
Jon Rohan 63f4c683e6 Publish 
- primer-alerts@1.5.4
 - primer-avatars@1.5.1
 - primer-base@1.6.2
 - primer-blankslate@1.4.4
 - primer-box@2.5.4
 - primer-branch-name@1.0.2
 - primer-breadcrumb@1.5.0
 - primer-buttons@2.5.2
 - primer-core@6.6.1
 - primer-forms@2.0.2
 - primer-labels@1.5.4
 - primer-layout@1.4.4
 - primer-markdown@3.7.4
 - primer-marketing-buttons@1.0.3
 - primer-marketing-support@1.4.0
 - primer-marketing-type@1.4.4
 - primer-marketing-utilities@1.6.0
 - primer-marketing@6.0.3
 - primer-navigation@1.5.2
 - primer-page-headers@1.4.4
 - primer-page-sections@1.4.4
 - primer-popover@0.0.5
 - primer-product@5.6.1
 - primer-subhead@1.0.2
 - primer-support@4.5.1
 - primer-table-object@1.4.4
 - primer-tables@1.4.4
 - primer-tooltips@1.5.1
 - primer-truncate@1.4.4
 - primer-utilities@4.8.4
 - primer@10.2.0
 - generator-primer-module@1.0.3
 - stylelint-config-primer@2.2.3
 - stylelint-selector-no-utility@1.8.3
2017-12-18 11:41:05 -08:00
..
lib move btn-large back into primer-buttons, update docs 2017-11-06 22:28:23 -06:00
.npmignore add marketing buttons to primer-marketing-buttons 2017-11-02 15:55:59 -07:00
index.scss edit package.json 2017-11-02 16:02:36 -07:00
LICENSE add marketing buttons to primer-marketing-buttons 2017-11-02 15:55:59 -07:00
package.json Publish 2017-12-18 11:41:05 -08:00
README.md Changing shields.io url to https 2017-11-15 10:08:26 -08:00
stories.js only btn-orange is being added 2017-11-06 22:40:30 -06:00

README.md

Primer Marketing CSS Buttons

npm version Build Status

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 repository.

Documentation

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

Colors

Marketing buttons are available in orange.

<button class="btn btn-orange" type="button">Button button</button>

Outline button colors

The btn-outline has also been extended with 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
    <span class="Counter">12</span>
  </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

License

MIT © GitHub