Awesome buttons for awesome projects!
###Demo | Medium Article | ProductHunt | cdnjs
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)
bttn-xs
bttn-sm
bttn-md
bttn-lg
bttn-default
bttn-primary
bttn-warning
bttn-success
bttn-danger
bttn-royal
bttn-block
bttn-no-outline
(Don't show outline when navigating with keyboard/interact using mouse or touch)
bower install bttn.css
CDN - cdnjs
https://cdnjs.com/libraries/bttn.css
<link type="text/css" src="./dist/bttn.min.css"/>
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>
âšī¸ 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