bttn.css

KO | EN

gitlite — search

#javascript #hacktoberfest #react #typescript #llm #golang #machine-learning #rust #windows #kubernetes #vue #security #mcp #open-source

(★ 2,050)

Awesome buttons for awesome projects!

bttn.css Latest Version Download

Download Latest Version (.zip)

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

bttn.css Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

bttn.css

bttn.css Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README