bttn.css

KO | EN

gitlite — search

#python #react #ai #typescript #golang #go #android #rust #deep-learning #macos #nodejs #awesome #cli #mcp

(★ 2,050)

Awesome buttons for awesome projects!

파일 탐색기

최종 버전 다운로드 (.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

// 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)

#### 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/)

bttn.css

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

bttn.css

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README