bttn.css

Awesome buttons for awesome projects!

###Demo | Medium Article | ProductHunt | cdnjs

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

bower install bttn.css

CDN - cdnjs

https://cdnjs.com/libraries/bttn.css

CSS File

<link type="text/css" src="./dist/bttn.min.css"/>

Usage

Include bttn.min.css in head of your html file and start using bttn CSS classes in your button.

<button class="bttn-material-circle bttn-md">
  <i class="icon-menu"></i>
</button>

Environment Setup

ℹ️ Build process uses yarn, you can also use npm instead.

####Install dependencies - stylus, autoprefixer-stylus and clean-css

yarn

####Compile stylus to css

yarn start

####Dev environment

yarn run dev

####Minify css for production and build example folder javascript files(Webpack)

yarn run build

####View bttn.css demo in browser

open build/index.html in browser

##TODO

• Add loading & done state animations
• Test on older version of the browsers

Mentions

• Tutorialzine
• Dr.Web
• SiloMag