https://github.com/chantastic/btn.css
A scalable, style-able button.
https://github.com/chantastic/btn.css
Last synced: 11 months ago
JSON representation
A scalable, style-able button.
- Host: GitHub
- URL: https://github.com/chantastic/btn.css
- Owner: chantastic
- Created: 2014-12-11T03:46:35.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2024-06-29T13:33:40.000Z (almost 2 years ago)
- Last Synced: 2025-06-22T04:12:04.063Z (12 months ago)
- Language: HTML
- Homepage: https://chantastic.org/btn.css
- Size: 16.6 KB
- Stars: 7
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.markdown
Awesome Lists containing this project
README
# btn.css
A scalable, style-able button.
## Installation
Script tag:
Node:
npm install btn.css@0.3.0
## The code
This is `.btn` all the code.
/*! btn.css */
.btn {
font-size: 1em;
line-height: 2em;
display: inline-block;
padding: 0 1em;
cursor: pointer;
white-space: nowrap;
text-decoration: none;
border-width: 1px;
border-style: solid;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
## Usage
### Modifiers
Extend `.btn` with classes of your own.
Creating a new classes that define `color`, `background-color` and `border-color`.
.my-fancy-outline-btn {
color: blue;
background-color: transparent;
border-color: currentColor;
}
.my-fancy-outline-btn:hover {
color: white;
background-color: blue;
border-color: blue;
}
.my-fancy-outline-btn:active {
color: whitesmoke;
background-color: darkblue;
border-color: darkblue;
}
### Adapters
Chances are you're buttons share a common theme.
Make an adapter for `.btn` in your app.
/* my app's .btn */
.btn {
border-radius: 4px;
box-shadow: 0 4px 3px -2px rgba(0,0,0,0.3);
}
### Scale
Scale `.btn` by changing `font-size`.
.my-big-btn { font-size: 2em }
You can also scale one-off buttons right on element.
Super Button
## More examples
[chantastic.org/btn.css](https://chantastic.org/btn.css/)
<3 [@chantastic](http://twitter.com/chantastic)