Awesome buttons for awesome projects!
CSS JavaScript HTML
Latest commit 2a18f8b Jan 15, 2017 @ganapativs committed on GitHub Update README.md

README.md

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)

Usage

Include bttn.min.css from dist folder or download bttn.min.css from cdnjs and add it to head of your html file and start using CSS classes to 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