1.1.4 • Published 5 years ago
gradow-btn v1.1.4
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/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>Browser support
Works in all modern browsers.
Chrome >= 26 Firefox >= 16 Safari >= 6.1 Opera >= 15 IE >= 9
Authors
Shemet Daniil - DanyaShemet