twitter-bootstrap-buttonsI’ve been writing about the creation of my WordPress starter theme, ‘Oystershell’, that I used as the base for the development of the theme for this website and how I used a range of other starter themes and code bases as inspiration. One of the decisions I made was to include the code for making CSS buttons from Twitter Bootstrap.

Twitter Bootstrap is a “sleek, intuitive, and powerful front-end framework for faster and easier web development” provided by Twitter. It has a range of components providing different user interface elements that used together can help you build a website in the style of the Twitter website.

I really like Bootstrap. The elements are well designed and stylish. But I didn’t want to include the whole of it in my starter theme. I wanted to pick and choose from the elements and happily the Bootstrap website includes a feature that allows you to customise your download so you only get the bits of code you want.

The component I thought would be most useful to include in my starter theme was the Bootstrap style buttons. You can see some examples of these here:


A Bootstrap ButtonAnother Bootstrap Button

Bootstrap Button with icon Bootstrap Button with white icon

Mini Small Default Large


Primary Info Success Warning Danger InverseButton Block

With CSS from Bootstrap added to my starter theme’s CSS I only need to add a simple class declaration to a <button> or <a> tag to turn it into a snazzy button.