We took the time to restyle Bootstraps button options to match Raleway, you have every button you might need depending on the situation, simply choose what you need and paste the shortcode. We also added a couple of extra kicks and bangs.
App.net | .btn .btn-social-icon .btn-adn |
Bitbucket | .btn .btn-social-icon .btn-bitbucket |
Dropbox | .btn .btn-social-icon .btn-dropbox |
.btn .btn-social-icon .btn-facebook |
|
Flickr | .btn .btn-social-icon .btn-flickr |
Foursquare | .btn .btn-social-icon .btn-foursquare |
GitHub | .btn .btn-social-icon .btn-github |
.btn .btn-social-icon .btn-google-plus |
|
.btn .btn-social-icon .btn-instagram |
|
.btn .btn-social-icon .btn-linkedin |
|
Microsoft | .btn .btn-social-icon .btn-microsoft |
OpenID | .btn .btn-social-icon .btn-openid |
SoundCloud | .btn .btn-social-icon .btn-soundcloud |
Tumblr | .btn .btn-social-icon .btn-tumblr |
.btn .btn-social-icon .btn-twitter |
|
Vimeo | .btn .btn-social-icon .btn-vimeo |
VK | .btn .btn-social-icon .btn-vk |
Yahoo! | .btn .btn-social-icon .btn-yahoo |
<a class="btn btn-social btn-adn"><span class="fa fa-adn"></span> App.net</a> <a class="btn btn-social btn-bitbucket"><span class="fa fa-bitbucket"></span> Bitbucket</a> <a class="btn btn-social btn-dropbox"><span class="fa fa-dropbox"></span> Dropbox</a> <a class="btn btn-social btn-facebook"><span class="fa fa-facebook"></span> Facebook</a> <a class="btn btn-social btn-flickr"><span class="fa fa-flickr"></span> Flickr</a> <a class="btn btn-social btn-foursquare"><span class="fa fa-foursquare"></span> Foursquare</a> <a class="btn btn-social btn-github"><span class="fa fa-github"></span> GitHub</a> <a class="btn btn-social btn-google-plus"><span class="fa fa-google-plus"></span> Google</a> <a class="btn btn-social btn-instagram"><span class="fa fa-instagram"></span> Instagram</a> <a class="btn btn-social btn-linkedin"><span class="fa fa-linkedin"></span> LinkedIn</a> <a class="btn btn-social btn-microsoft"><span class="fa fa-windows"></span> Microsoft</a> <a class="btn btn-social btn-openid"><span class="fa fa-openid"></span> OpenID</a> <a class="btn btn-social btn-soundcloud"><span class="fa fa-soundcloud"></span> SoundCloud</a> <a class="btn btn-social btn-tumblr"><span class="fa fa-tumblr"></span> Tumblr</a> <a class="btn btn-social btn-twitter"><span class="fa fa-twitter"></span> Twitter</a> <a class="btn btn-social btn-vimeo"><span class="fa fa-vimeo-square"></span> Vimeo</a> <a class="btn btn-social btn-vk"><span class="fa fa-vk"></span> VK</a> <a class="btn btn-social btn-yahoo"><span class="fa fa-yahoo"></span> Yahoo!</a>
To use the buttons without text simply remove the text and the button will continue to function:
<a class="btn btn-social-icon btn-adn"><span class="fa fa-adn"></span></a> <a class="btn btn-social-icon btn-bitbucket"><span class="fa fa-bitbucket"></span></a> <a class="btn btn-social-icon btn-dropbox"><span class="fa fa-dropbox"></span></a> <a class="btn btn-social-icon btn-facebook"><span class="fa fa-facebook"></span></a> <a class="btn btn-social-icon btn-flickr"><span class="fa fa-flickr"></span></a> <a class="btn btn-social-icon btn-foursquare"><span class="fa fa-foursquare"></span></a> <a class="btn btn-social-icon btn-github"><span class="fa fa-github"></span></a> <a class="btn btn-social-icon btn-google-plus"><span class="fa fa-google-plus"></span></a> <a class="btn btn-social-icon btn-instagram"><span class="fa fa-instagram"></span></a> <a class="btn btn-social-icon btn-linkedin"><span class="fa fa-linkedin"></span></a> <a class="btn btn-social-icon btn-microsoft"><span class="fa fa-windows"></span></a> <a class="btn btn-social-icon btn-openid"><span class="fa fa-openid"></span></a> <a class="btn btn-social-icon btn-soundcloud"><span class="fa fa-soundcloud"></span></a> <a class="btn btn-social-icon btn-tumblr"><span class="fa fa-tumblr"></span></a> <a class="btn btn-social-icon btn-twitter"><span class="fa fa-twitter"></span></a> <a class="btn btn-social-icon btn-vimeo"><span class="fa fa-vimeo-square"></span></a> <a class="btn btn-social-icon btn-vk"><span class="fa fa-vk"></span></a> <a class="btn btn-social-icon btn-yahoo"><span class="fa fa-yahoo"></span></a>
Sizing is also extremely simple, as well as block-level, has same features available as Bootstrap. See code example.
Dropbox Dropbox Dropbox Dropbox<!--=== With Text Sizing ===--> <a class="btn btn-block btn-social btn-lg btn-dropbox"><span class="fa fa-dropbox"></span> Dropbox</a> <a class="btn btn-block btn-social btn-dropbox"><span class="fa fa-dropbox"></span> Dropbox</a> <a class="btn btn-block btn-social btn-sm btn-dropbox"><span class="fa fa-dropbox"></span> Dropbox</a> <a class="btn btn-block btn-social btn-xs btn-dropbox"><span class="fa fa-dropbox"></span> Dropbox</a> <!--=== Without Text Sizing ===--> <a class="btn btn-social-icon btn-lg btn-dropbox"><span class="fa fa-dropbox"></span></a> <a class="btn btn-social-icon btn-dropbox"><span class="fa fa-dropbox"></span></a> <a class="btn btn-social-icon btn-sm btn-dropbox"><span class="fa fa-dropbox"></span></a> <a class="btn btn-social-icon btn-xs btn-dropbox"><span class="fa fa-dropbox"></span></a>