cyrilferte / bttn.css

Awesome buttons for awesome projects!

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

• Tutorialzine
• Dr.Web
• SiloMag