bttn.css - GitLite

KO | EN

gitlite — search

#javascript #hacktoberfest #react #ai #go #golang #deep-learning #linux #awesome #cli #kubernetes #vue #pytorch #security

bttn.css

(★ 2,050)

Awesome buttons for awesome projects!

File Explorer

Download Latest Version (.zip)

- bttn-base.styl
- config.styl
- - .DS_Store
  - app.js
  - bttnBox.js
  - bttns.js
  - footer.js
  - header.js
  - options.js
- - demo.styl
  - flexboxgrid.css
  - hint.min.css
- .DS_Store
- index.ejs
- index.js
- - bordered.css
  - fill.css
  - float.css
  - gradient.css
  - jelly.css
  - material-circle.css
  - material-flat.css
  - minimal.css
  - pill.css
  - simple.css
  - slant.css
  - stretch.css
  - unite.css
- bttn.css
- bttn.min.css
- - bordered.styl
  - fill.styl
  - float.styl
  - gradient.styl
  - jelly.styl
  - material-circle.styl
  - material-flat.styl
  - minimal.styl
  - pill.styl
  - simple.styl
  - slant.styl
  - stretch.styl
  - unite.styl
- - bordered.styl
  - fill.styl
  - float.styl
  - gradient.styl
  - jelly.styl
  - material-circle.styl
  - material-flat.styl
  - minimal.styl
  - pill.styl
  - simple.styl
  - slant.styl
  - stretch.styl
  - unite.styl
- base.styl
- copyright.styl
- helpers.styl
.babelrc
.eslintrc
.gitignore
browserslist
bttn.styl
LICENSE
package.json
README.md
webpack.config.babel.js
yarn.lock

# Installation Guide

1. Get the code

git clone https://github.com/ganapativs/bttn.css

Downloads the entire project code from GitHub to your computer.

cd bttn.css

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install

Downloads and installs the libraries listed in package.json.

npm start

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# bttn.css
Awesome buttons for awesome projects!

[Demo](https://bttn.surge.sh/) | [Medium Article](https://medium.com/@ganapativs/bttn-css-awesome-buttons-for-awesome-projects-baa2486bcb3d) | [ProductHunt](https://www.producthunt.com/posts/bttn-css) | [cdnjs](https://cdnjs.com/libraries/bttn.css)

<img src="http://imgur.com/mqPa6Ac.png" width="600" />

#### Button style classes
- `bttn-simple`
- `bttn-bordered`
- `bttn-minimal`
- `bttn-stretch`
- `bttn-jelly`
- `bttn-gradient`
- `bttn-fill`
- `bttn-material-circle`
- `bttn-material-flat`
- `bttn-pill`
- `bttn-float`
- `bttn-unite`
- `bttn-slant` *(Beta)*

#### Button sizes
- `bttn-xs`
- `bttn-sm`
- `bttn-md`
- `bttn-lg`

#### Button Colors
- `bttn-default`
- `bttn-primary`
- `bttn-warning`
- `bttn-success`
- `bttn-danger`
- `bttn-royal`

#### Button helper classes
- `bttn-block`
- `bttn-no-outline` (Don't show outline when navigating with keyboard/interact using mouse or touch)

### Install

#### Bower
<pre>
bower install bttn.css
</pre>

#### CDN - [cdnjs](https://cdnjs.com/libraries/bttn.css)
<pre>
https://cdnjs.com/libraries/bttn.css
</pre>

#### CSS File
<pre>
&lt;link type="text/css" src="./dist/bttn.min.css"/&gt;
</pre>

### Usage
Include `bttn.min.css` in head of your html file and start using bttn CSS classes in your button.
<pre>
&lt;button class="bttn-material-circle bttn-md"&gt;
  &lt;i class="icon-menu"&gt;&lt;/i&gt;
&lt;/button&gt;
</pre>

### Environment Setup

> :information_source: Build process uses [yarn](https://yarnpkg.com), you can also use npm instead.

#### Install dependencies - stylus, autoprefixer-stylus and clean-css
<pre>
yarn
</pre>

#### Compile stylus to css
<pre>
yarn start
</pre>

#### Dev environment
<pre>
yarn run dev
</pre>

#### Minify css for production and build example folder javascript files(Webpack)
<pre>
yarn run build
</pre>

#### View bttn.css demo in browser
<pre>
open build/index.html in browser
</pre>

## TODO
- Add loading & done state animations
- Test on older version of the browsers

### Mentions
 - [Hongkiat](http://www.hongkiat.com/blog/css-buttons-bttncss/)
 - [Tutorialspoint](https://www.tutorialspoint.com/css_buttons/css_buttons_bttnscss.htm)
 - [Betapage](https://betapage.co/product/bttn-css)
 - [Tutorialzine](http://tutorialzine.com/2017/01/15-interesting-javascript-and-css-libraries-for-january-2017/)
 - [Webmaster.kitchen](https://webmaster.kitchen/bttn-css-4kbdan-kucuk-mukemel-css-butonlari/)
 - [Dr.Web](https://www.drweb.de/magazin/css-huebsche-buttons-mit-bttn-css/)
 - [SiloMag](http://www.silocreativo.com/silomag-04/)