❤
npm
Sign UpSign In

niduscss-components-button

5.0.0 • Public • Published

niduscss-components-button

npm

Button CSS styles for niduscss framework.

Installation

$ npm install niduscss-components-button

Usage

Define the custom properties in a file if you like modify the default values:

Example: create a setting.css file:

:root {
  --Button-background: #ff7043;
  --Button-color: #fff;
  --Button-height: 2.25rem;
  --Button-font-size: 1rem;
  --Button-borderRadius: 0;
  --Button-focusColor: #ff7043.
}

Import styles:

styles.css:

/* Import first de file with custom properties or declare before import the
   component.
   ========================================================================== */
 
@import "settings";
 
/* Components
   ========================================================================== */
@import "niduscss-components-button";
 
/* Other styles */

Use in html files

<!-- Normal Button -->
<button class="Button">Button</button>
 
<!-- Link Button -->
<a class="Button">Link Button</a>
 
<!-- Disabled Button -->
<button class="Button Button--disabled">Button</button>
 
<!-- Button containing multiple elements aligned vertically -->
<button class="Button Button--combined">
  <svg class="Button-icon" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 0h24v24H0z" fill="none"/>
    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
  </svg>
  <span class="Button-label">Label</span>
</button>

Changelog

Readme

Keywords

Package Sidebar

Install

npm i niduscss-components-button

Repository

github.com/nimedev/niduscss-framework

Homepage

github.com/nimedev/niduscss-framework

Weekly Downloads

1

Version

5.0.0

License

MIT

Last publish

Collaborators

  • nimedev
Try on RunKit
Report malware