A CSS fully customizable button library built using Sass and Compass
Your view code examples on the Button Website
There is also a Ruby Gem Friendly Version
- Download Buttons and add files to your website.
- Include css in the head of your webpage. You only need the font-awesome css if you're using icons
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/buttons.css">
- Create buttons in your html.
- Clone the Buttons repo
- Make sure you have Sass and Compass installed.
- Edit the _options.scss with your own custom values (see values below)
- Run the compass watch command root of the Buttons directory from the command line.
- The buttons.css file should now be updated
In order to edit your options simple option the _options.scss file. After you make your edits run compass watch in the root of the button directory and the updates should take place. You can use index.html to view your changes.
- $namespace: Desired CSS namespace for your buttons (default .button)
- $glow_namespace: Desired CSS namespace for your glow effect (default .glow)
- $glow_color: Default glow color (#2c9adb, light blue)
- $bgcolor: Default button background color (#EEE, light gray)
- *** $height:* Default height, also used to calculate padding on the sides (32px)
- $font-color: Default font color (#666, gray)
- $font-size: Default font size (14px)
- $font-weight: Default font weight (300)
- $font-family: Default font family ("HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif)
The only option you should adjust here is the button actions. When you need to add/remove/edit another button color simple add/remove/edit on of the items in the list. There is not limit to the number of items in your list. Each item will create a new button.
- $button_actions: Edit this to add new buttons ('name' background-color font-color) example: ('highlight' #F18D05 #FFF) ('caution' #E54028 #FFF)
- $button_styles: Correspond to the styles avaialble ('rounded' 'pill' 'circle')
- $button_sizes: Correspond to the sizes avaialble ('large' 'small' 'tiny')
- $circle-size: Radius for circle buttons, circles only have one size (120px)
created with by @alexwolfe at @adroll