Gradow-components.css

Gradow-button

It's library of custom buttons with cool shadow-effect

Features

• Basic
  • Border-radius -
  • Colors - Primary, *Accept *, Info, *Secondary *, Danger , *Light *, *Dark *
  • Animations
• Responsive
• No JavaScript
• State - Focus, Hover
• Supports frameworks - Bootstrap, Foundation, Sematic UI, Bulma, ...
• Supports all modern browsers, including mobile devices
• Print friendly

Installation

Npm module

  >npm i gradow-btn 

• Manual download ( Github )

<link rel="stylesheet" href="<PATH>/graddow-btn/graddow-btn.min.css"/>

<PATH> is where the library is downloaded.

Add graddow-btn.min.css in your html

CDN

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/gradow-btn.min.css"/>

Usage

Gradow button comes with many styles,

| Class name | Description | | :---------- | :----------------------- | | s-btn | Basic style *required | | b-primary | Add primary-styles(blue) for button | | b-accept | Add primary-styles(green) for button | | b-danger | Add primary-styles(red) for button | | b-info | Add primary-styles(yellow) for button | | b-secondary | Add primary-styles(grey) for button | | b-light | Add primary-styles(light) for button | | b-dark | Add primary-styles(dark) for button | | r-{number} | Sets the radius of the button | | w-{number} | Sets the width of the button | | h-{number} | Sets the height of the button |

Example

• Primary button

  <div class="">
     <button class="s-btn b-primary-simple r-20 w-170 h-30">Send</button>
  </div>

• Accept button

  <div class="">
     <button class="s-btn b-accept-simple r-10 h-30">Accept</button>
  </div>

Buttons has extra classes for stylization size r-30 w-200 h50 You can combine them.

  <div class="">
     <button class="s-btn b-primary-simple r-30 w-180 h-40" >Send</button>
  </div>

Browser support

Works in all modern browsers.

Chrome >= 26 Firefox >= 16 Safari >= 6.1 Opera >= 15 IE >= 9

Authors

Shemet Daniil - DanyaShemet