Skip to content

shekyb/bttn.css

 
 

Repository files navigation

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

About

Awesome buttons for awesome projects!

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • CSS 69.1%
  • JavaScript 29.4%
  • HTML 1.5%