Social Buttons

With Text

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
Facebook .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
Google .btn .btn-social-icon .btn-google-plus
Instagram .btn .btn-social-icon .btn-instagram
LinkedIn .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
Twitter .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>

Without Text

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

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>

Raleway Bootstrap 3 Template is what you need for your next project or client.

Buy now

228 Park Ave S New York, NY 10003

info@raleway.com

+11192386513