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

CDN - cdnjs

CSS File

Usage

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

Environment Setup

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

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

Compile stylus to css

Dev environment

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

View bttn.css demo in browser

TODO

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

Mentions

• Hongkiat
• Tutorialspoint
• Betapage
• Tutorialzine
• Webmaster.kitchen
• Dr.Web
• SiloMag