Bbuttons

Installation top

Bbuttons is available as a rubygem. If you have ruby installed on your machine, then run the command;

$ gem install bbuttons-0.0.2.gem

Or if you prefer to use bower (preferred method)

$ bower install bbuttons

Getting started top

Lets start things off with the pre-defined classes you can add to button tags to showcase your ability to integrate this project easily. If you have little experience with HTML and CSS then this is the perfect start.

Bbutton! Bbutton! Bbutton! HTML

        < button class="bsimple" >Bbutton!< /button >
        < button class="bbubbly" >Bbutton!< /button >
        < button class="bchunky" >Bbutton!< /button >
      

The mixins top

For a full list of mixins I recommend checking out the mixin library

For the sass enthusiast I recommend using the mixins to their fullest potential. Lets start off with something simple;

I am green I am green I am green HTML

        < button>I am green< /button>
      

SASS

      @include bsimple(#93bd20, #333, 16px, #DDD)
      @include bbubbly(#93bd20, #333, 16px, #DDD)
      @include bchunky(#93bd20, #333, 16px, #DDD)
      

Here we call the bsimple class on its own. We pass the button color, text color, font-size and shadow color. There is also a default bbutton mixin to accomplish the same thing

I am orange I am orange I am orange HTML

        < button>I am orange< /button>
      

SASS

      @include bbutton( simple, #ba5200, white, 16px, black)
      @include bbutton( bubbly, #ba5200, white, 16px, black)
      @include bbutton( chunky, #ba5200, white, 16px, black)
      

Button group top

No button package would be complete without a mixin for a button group.

HTML

      < div  class="button-group" >
          < button  class="someclass" > Left < /button>
          < button  class="someclass" > Mid < /button>
          < button  class="someclass" > Right < /button>
      < /div>
      

SASS

      .button-group button
          @include bbubbly( #985ab6, white, 16px, #333 )
      

Dropdown top

Everyone loves button dropdowns. You can use these for all kinds of cool things.

HTML

      < div  class="button-drop" >
          < button  id="someid" > Dropdown < /button>
          < li  class="header" > Some links < /li>
          < li>
              < a href="#" Link < /a>
          < /li>
          < li>
              < a href="#" Go somewhere < /a>
          < /li>
          < li>
              < a href="#" Anchor < /a>
          < /li>
      < /div>
      

SASS

      .button-drop
          button
              @include bbutton( 'simple', purple, #FFF )
              // or
              @include bbutton( 'bubbly', orange, #FFF )
              // or
              @include bbutton( 'chunky', green, #FFF )
          // And add the dropdown-style
          @include dropdown-style( 'simple', purple, 0, 10px )
          // or
          @include dropdown-style( 'bubbly', orange, 5px, 10px )
          // or
          @include dropdown-style( 'chunky', green, 3px, 5px )
      

Trouble? Add this to your < head > tag.

      < script type="text/javascript">
      $(document).ready(function() {
          $(".button-drop").click(function(event) {
              var id = event.target.id;
              return $("button[id=" + id + "] ~ ul").toggle();
          });
      });
      < /script>
      

Glass buttons top

Use these buttons when you want a button to show off your background. If you want a cool example, look at the buttons at the top of this very page. These buttons must be used as mixins since I don't yet have a default class for them.

Simple glass Bubbly glass Chunky glass SASS

      @include bbutton( 'simple-glass' , #4369b4, white, 16px, #333 )
      @include bbutton( 'bubbly-glass' , #4369b4, white, 16px, #333 )
      @include bbutton( 'chunky-glass' , #4369b4, white, 16px, #333 )
      

Popular buttons top

These buttons can be used when you want the look or feel of your favorite sites. They also play nice with Bbutton button-groups and dropdowns.

Google's button

        < button class="bgoogle" >Google!< /button >
      

Google's blue button

        < button class="bgoogle blue" >Google blue!< /button >
      

Facebook's button

        < button class="bfacebook" >Facebook!< /button >
      

GitHub's button

        < button class="bgithub" >GitHub!< /button >
      

GitHub's inverted button

        < button class="bgithub danger" >GitHub invert!< /button >
      

Delicious' button

        < button class="bdelicious" >Delicious!< /button >