Bbuttons

Variables top

$bbutton-color: #CCC;
$bbutton-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
$bbutton-radius: 3px;
$blue-bbutton: #545FDD;
$glass-color: rgba(0,0,0,0.0);
$glass-hover: rgba(0,0,0,0.2);
$default-font-size: 18px;
$delicious-button-color: rgb(50, 116, 209);
$delicious-font-family: 'Helvetica Neue', HelveticaNeue, 'Droid Sans',
                        Roboto, Helvetica, sans-serif;
$delicious-font-size: 16px;
$experimental-support-for-svg: true;
$facebook-blue: rgb(91, 116, 168);
$facebook-box-shadow: 0 1px rgba(0,0,0,0.15);
$facebook-font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
$facebook-font-size: 11px;
$facebook-gray-button: rgb(238, 238, 238);
$facebook-gray-font-color: rgb(51, 51, 51);
$font-color: #333;
$github-box-shadow-active: 0 3px 5px rgba(0,0,0,0.2) inset;
$github-font-color: rgb(51, 51, 51);
$github-font-family: Helvetica, arial, freesans, clean, sans-serif;
$github-font-size: 12.8;
$github-gray: rgb(234, 234, 234);
$github-text-shadow: 0 1px rgba(255, 255, 255, 0.9);
$google-blue-active: 0 2px 2px rgba(0,0,0,0.2) inset;
$google-blue: rgb(77, 144, 254);
$google-font-color: rgb(68, 68, 68);
$google-font-family: arial, sans-serif;
$google-font-size: 12.909090995788574px;
$google-gray: #f8f8f8;
$google-shadow-active: 0 1px 2px rgba(0,0,0,0.1) inset;
$google-shadow-hover: 0 1px 1px rgba(0,0,0,0.1);
$green-bbutton: #339933;
$red-bbutton: #990000;
$simple-box-shadow: 0px 1px 3px 1px rgba(0,0,0,0.2) inset;
$simple-shadow: rgba(255,255,255,0.25);
$bbutton-shadow: 0 1 $simple-shadow;
$bbutton-shadow-invert: 0 -1 $simple-shadow;
$teal-bbutton: #0FE5D4;
$yellow-bbutton: #E5D400;

      

bbutton examplestop

@include bbutton( {$type}, {$color}, {$font-color}, {$font-size}, {$font-shadow}, {$radius} )

Variable	Options
$type	'simple' (default) 'bubbly' 'chunky' 'simple-glass' 'bubbly-glass' 'chunky-glass'
$color	$bbutton-color (default), Any hex color or rgb(a) value.
$font-color	$font-color (default)
$font-size	$bbutton-font (default)
$font-shadow	$simple-shadow (default)
$radius	$bbutton-radius (default)

This mixin is a shortcut to the other mixin classes. You can change any of these values by editing the variables in the _bbuttons.scss file.

bsimple examplestop

@include bsimple( {$color}, {$font-color}, {$font-size}, {$font-shadow}, {$radius} )

Variable	Options
$color	$bbutton-color (default) Any hex color or rgb(a) value.
$font-color	$font-color (default)
$font-size	$bbutton-font (default)
$font-shadow	$simple-shadow (default)
$radius	$bbutton-radius (default)

You can change any of these values by editing the variables in the _bbuttons.scss file.

bbubbly examplestop

@include bbubbly( {$color}, {$font-color}, {$font-size}, {$font-shadow}, {$radius} )

Variable	Options
$color	$bbutton-color (default) Any hex color or rgb(a) value.
$font-color	$font-color (default)
$font-size	$bbutton-font (default)
$font-shadow	$simple-shadow (default)
$radius	$bbutton-radius (default)

You can change any of these values by editing the variables in the _bbuttons.scss file.

bchunky examplestop

@include bchunky( {$color}, {$font-color}, {$font-size}, {$font-shadow}, {$radius} )

Variable	Options
$color	$bbutton-color (default) Any hex color or rgb(a) value.
$font-color	$font-color (default)
$font-size	$bbutton-font (default)
$font-shadow	$simple-shadow (default)
$radius	$bbutton-radius (default)

You can change any of these values by editing the variables in the _bbuttons.scss file.

bglass examplestop

@include bglass( {$type} )

Variable	Options
$type	'simple' (default) 'bubbly' 'chunky'

Although the glass mixin was made for bbutton types, it works on the default button tag. If you are comfrotable editing the _bbutton-styles.scss file, feel free to tromp all over this class.