Buttons – A CSS button library built with Sass & Compass

Buttons is a lovely CSS button library with dozens of different buttons you can generate and use in your projects. The library is built with Sass and Compass and it is created by Alex Wolfe and Rob Levin. There are more than 10 customization of buttons that can be used such as flat, rounded, circle, glow,with icons, block and many more. The whole library can be downloaded as it is but there is also an option to customize the colours, font face, size names and backgrounds and then download it with your own customization. Discover the library below!


Don’t struggle alone with projects

Join the creative community of UX, graphic and web designers and developers to get help with any design or dev project.





Setup Buttons

  1. Download Buttons and add files to your website.
  2. Add css in the head of your webpage.
    1. <link href=“//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css” rel=“stylesheet”>
    2. <link rel=“stylesheet” href=“css/buttons.css”>
    3. <script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
    4. <script type=“text/javascript” src=“js/buttons.js”></script>

    * You only need the font-awesome css if you’re using icons
    * You only need jquery & buttons.js if you’re using dropdown buttons

  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

Download  Customize

Related post:  Top 19 Creative Google Chrome Tools for Designers
Divi WordPress Theme

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.