Home » Web Programming » CSS 3 Buttons – Rounded, Pill, Square, Circle – Buttons.css

CSS 3 Buttons – Rounded, Pill, Square, Circle – Buttons.css

buttons-cssButtons.css is a css library for helping to create awsome CSS3 Buttons. It includes predefined shapes of Circle Buttons, Pill Buttons, Square, Block etc..

It is built with Sass + Compass and has support for square, rounded or circular buttons that can be flat or not. Button.css having custom effects like glow and background engrave effects. The sizes, colors, effects and fonts used can all be changed with the help of variables and it can be extended easily.




Setup Buttons

  1. Download Buttons and add files to your website.
  2. Add css in the head of your webpage.
    1. <link rel=”stylesheet” href=”css/font-awesome.min.css”>
    2. <link rel=”stylesheet” href=”css/button.css”>

    You only need the font-awesome css if you’re using icons

  3. Create buttons in your html.

Customize Buttons

  1. Fork or Download the Buttons project on github.
  2. Make sure you have Sass and Compass installed.
  3. Edit the _options.scss with your own custom values
  4. In the root of the Buttons directory type compass watch on the command line.
  5. The buttons.css file should now be updated

Website: http://alexwolfe.github.io/Buttons/
Download: https://github.com/alexwolfe/Buttons

1 thought on “CSS 3 Buttons – Rounded, Pill, Square, Circle – Buttons.css”

  1. Reading your site gave me a lot of interesting informations , it
    deserves to go viral, you need some initial traffic only.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.