Nimble Pixie Merchant

    web-button-styles

    4.0.0 • Public • Published

    web-button-styles Build Status

    CSS and SCSS base styles for buttons, distributed as an NPM package.

    On NPM: https://www.npmjs.com/package/web-button-styles

    Install

    Via NPM:

    npm install --save web-button-styles

    Or via Yarn:

    yarn add web-button-styles

    Usage

    There are two main ways of using this package: in CSS or SCSS. After the source is included, HTML markup usage is the same for either method.

    1. Source Inclusion

    A). SCSS

    If you're writing SCSS that will be compiled later using the Sass preprocessor, just import the SCSS file wherever you like:

    @import "PATH/TO/node_modules/web-button-styles/web-button-styles";

    B). CSS

    Otherwise, if you're working with plain CSS, you can import either the minified stylesheet (compiled-web-styles.min.css):

    <!-- Probably in the <head> element: -->
    <link rel="stylesheet" href="/PATH/TO/node_modules/web-button-styles/web-button-styles.min.css">

    or the unminified stylesheet (compiled-web-button-styles.css)

    <!-- Probably in the <head> element: -->
    <link rel="stylesheet" href="/PATH/TO/node_modules/web-button-styles/web-button-styles.css">

    2. HTML Markup

    After including the source in your SCSS or CSS, buttons are used like so:

    <button>Default</button>
    <button class="primary">Primary</button>
    <button class="secondary">Secondary</button>

    Or, even better:

    <button type="button">Default</button>
    <button type="button" class="primary">Primary</button>
    <button type="button" class="secondary">Secondary</button>

    This snippet shows all the basic types, classes, and combinations:

    <!-- Normal, Solid Buttons -->
    <button type="button">Default</button>
    <button type="button" class="primary">Primary</button>
    <button type="button" class="secondary">Secondary</button>
    
    
    <!-- Outline Buttons -->
    <button type="button" class="outline">Default</button>
    <button type="button" class="primary outline">Primary</button>
    <button type="button" class="secondary outline">Secondary</button>
    
    
    <!-- Round Buttons -->
    <button type="button" class="round">Default</button>
    <button type="button" class="primary round">Primary</button>
    <button type="button" class="secondary round">Secondary</button>
    
    
    <!-- Round, Outline Buttons -->
    <button type="button" class="round outline">Default</button>
    <button type="button" class="primary round outline">Primary</button>
    <button type="button" class="secondary round outline">Secondary</button>
    
    
    <!-- Button-type Inputs -->
    <input type="button" value="Button">
    <input type="submit" value="Submit" class="primary">
    <input type="reset" value="Reset" class="secondary outline">
    
    
    <!-- Button-Styled Link (Anchor) -->
    <a href="#" class="button">Link As Button</a>
    
    <!-- Full, Block-Width Button -->
    <button type="button" class="block">Block Button</button>
    
    <!-- Icon Button (with primary style) -->
    <button type="button" class="icon-button primary">
      <span class="icon-wrapper">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">...</svg>
      </span>
      <span class="text-content">Icon Button</span>
    </button>
    
    <!-- Icon Button (with secondary style) -->
    <button type="button" class="icon-button secondary">
      <span class="icon-wrapper">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">...</svg>
      </span>
      <span class="text-content">Icon Button</span>
    </button>
    
    <!-- Icon Button (with outline style) -->
    <button type="button" class="icon-button outline">
      <span class="icon-wrapper">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">...</svg>
      </span>
      <span class="text-content">Icon Button</span>
    </button>
    
    <!-- Icon-Only Button -->
    <button type="button" class="icon-only-button secondary">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
      <title>menu</title>
        <g fill="#F7F7F7">
         <circle cx="04" cy="16" r="3"></circle>
         <circle cx="16" cy="16" r="3"></circle>
         <circle cx="28" cy="16" r="3"></circle>
        </g>
      </svg>
    </button>
    

    Screenshots

    Desktop Screenshot

    Mobile Screenshot

    Install

    npm i web-button-styles

    DownloadsWeekly Downloads

    1

    Version

    4.0.0

    License

    MIT

    Unpacked Size

    87.8 kB

    Total Files

    8

    Last publish

    Collaborators

    • mattdanielbrown