Giter Club home page Giter Club logo

bttn.css's Introduction

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

bttn.css's People

Contributors

ganapativs avatar richarddewit avatar

Watchers

Tiago Capelli avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤ī¸ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.