Buttons

Bitters brings a couple of nice default styles for buttons. Since, in our example, we'll implement our buttons via a .button class, we'll have to extend Bitters' selectors in _buttons.scss:

#{$all-buttons},
.button {

...and add a plain ".button" class to the corresponding items on our page:

<a href="#" class="button button--twitter">Twitter</a>
<a href="#" class="button button--rss">Subscribe</a>
...
<a class="button button--try" href="http://www.git-tower.com">Try it 30 days for free</a>

This leaves us with a really nice default styling - right out of the box:

With as good a basis as that, further customization of the buttons only takes a handful of lines:

.button--twitter {
  @include size(58px);
  background:#5AA4D4 url(../img/icons-social.svg) -132px 19px no-repeat;
}

.button--rss {
  @include size(152px 58px);
  background:#FFA763 url(../img/icon-rss.svg) 16px center no-repeat;
  padding-left:50px;
  margin-left:11px;
  line-height:28px;
  font-size:$article-font-size;
}

.button--try {
  border:2px solid $red;
  background-color:transparent;
  color:$red;
}

Button styling - GitHub

Our list page already looks quite nice. Let's move over to our article view for some more Bourbon, Bitters, and Neat in action.

Giveaways. Cheat Sheets. eBooks. Discounts.
And great content from our blog!

About Us

As the makers of Tower, the best Git client for Mac and Windows, we help over 100,000 users in companies like Apple, Google, Amazon, Twitter, and Ebay get the most out of Git.

Just like with Tower, our mission with this platform is to help people become better professionals.

That's why we provide our guides, videos, and cheat sheets (about version control with Git and lots of other topics) for free.