All Projects → ganapativs → Bttn.css

ganapativs / Bttn.css

Licence: mit
Awesome buttons for awesome projects!

Programming Languages

CSS
56736 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Bttn.css

Hhcustomcorner
Awesome library to customize corners of UIView and UIButton. Now you can customize each corner differently
Stars: ✭ 36 (-98.2%)
Mutual labels:  library, button
Bubbles
⚡️A library for adding messenger style floating bubbles to any android application 📲
Stars: ✭ 66 (-96.71%)
Mutual labels:  library, ui-design
Webrix
Powerful building blocks for React-based web applications
Stars: ✭ 41 (-97.95%)
Mutual labels:  library, frontend
Crab
JavaScript library for building user interfaces with Custom Elements, Shadow DOM and React like API
Stars: ✭ 22 (-98.9%)
Mutual labels:  library, frontend
Wymaterialbutton
Interactive and fully animated Material Design button for iOS developers.
Stars: ✭ 80 (-96.01%)
Mutual labels:  library, button
Fillingbutton
🔥Replace typical onLongClickListener with this library!
Stars: ✭ 31 (-98.45%)
Mutual labels:  library, button
Eyebrows
An eyebrows gradient color animation for android.
Stars: ✭ 49 (-97.55%)
Mutual labels:  library, ui-design
Fes.js
Fes.js 是一套优秀的中后台前端解决方案。提供初始项目、开发调试、Mock接口、编译打包的命令行工具。内置布局、权限、数据字典、状态管理、存储、Api等多个模块。以约定、配置化、组件化的设计思想,让用户仅仅关心用组件搭建页面内容。基于Vue.js,上手简单。经过多个项目中打磨,趋于稳定。
Stars: ✭ 579 (-71.11%)
Mutual labels:  ui-design, frontend
Easygrid
EasyGrid - VanillaJS Responsive Grid
Stars: ✭ 77 (-96.16%)
Mutual labels:  library, frontend
Notifier
Notifications library made with VanillaJS.
Stars: ✭ 67 (-96.66%)
Mutual labels:  library, frontend
Base
React-UI-Kit - frontend library with ReactJS components
Stars: ✭ 18 (-99.1%)
Mutual labels:  ui-design, frontend
Chat Ui Kit React
Build your own chat UI with React components in few minutes. Chat UI Kit from chatscope is an open source UI toolkit for developing web chat applications.
Stars: ✭ 131 (-93.46%)
Mutual labels:  library, frontend
Github Buttons
Unofficial github:buttons.
Stars: ✭ 821 (-59.03%)
Mutual labels:  button, frontend
Unicode Bidirectional
A Javascript implementation of the Unicode 9.0.0 Bidirectional Algorithm
Stars: ✭ 35 (-98.25%)
Mutual labels:  library, frontend
Iview
A high quality UI Toolkit built on Vue.js 2.0
Stars: ✭ 23,930 (+1094.11%)
Mutual labels:  ui-design, frontend
Angular Tree Component
A simple yet powerful tree component for Angular (>=2)
Stars: ✭ 1,031 (-48.55%)
Mutual labels:  library, frontend
Ivi
🔥 Javascript (TypeScript) library for building web user interfaces
Stars: ✭ 445 (-77.79%)
Mutual labels:  library, frontend
Esp Dash
A blazing fast library to create a functional dashboard for ESP8266 and ESP32
Stars: ✭ 548 (-72.65%)
Mutual labels:  library, button
P5.clickable
Event driven, easy-to-use button library for P5.js 👆
Stars: ✭ 66 (-96.71%)
Mutual labels:  library, button
Chocobar
The usual Snackbar with more 🍫 and colours 🎉
Stars: ✭ 110 (-94.51%)
Mutual labels:  library, ui-design

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].