Gradow-components.css

Demo and documentation
https://danyashemet.github.io/Gradow-components/

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/gradow-btn@1.1.0/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>

---

List of all buttons

Primary

ClassList	Example
b-primary-simple s-btn
b-primary-dark s-btn
b-primary-foggy s-btn
b-primary-common s-btn
b-primary-mysterious s-btn
b-primary-rainy s-btn
b-primary-rainy-ver_two s-btn

---

Accept

ClassList	Example
b-accept-simple s-btn
b-accept-dark s-btn
b-accept-foggy s-btn
b-accept-common s-btn
b-accept-mysterious s-btn
b-accept-smile s-btn
b-accept-swim s-btn

---

Info

ClassList	Example
b-info-simple s-btn
b-info-dark s-btn
b-info-foggy s-btn
b-info-common s-btn
b-info-mysterious s-btn

---

Secondary

ClassList	Example
b-second-simple s-btn
b-second-dark s-btn
b-second-light s-btn
b-second-mysterious s-btn
b-second-smile s-btn

---

Danger

ClassList	Example
b-danger-brightly s-btn
b-danger-cta s-btn
b-danger-pretty s-btn
b-danger-dark s-btn
b-danger-smile s-btn
b-danger-mysterious s-btn
b-danger-light s-btn

---

Light

ClassList	Example
b-light-sun s-btn
b-light-sky s-btn
b-light-green s-btn
b-light-pinkLine s-btn

---

Dark

ClassList	Example
b-dark-green s-btn
b-dark-purple s-btn
b-dark-burgundy s-btn
b-dark-blue s-btn
b-dark-grey s-btn

Browser support

Works in all modern browsers.

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

Authors

Shemet Daniil - DanyaShemet

Wishing you great use.
I will listen to the criticism and wishes here