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

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