Social buttons

Overview

Social-buttons is a simple CSS and FontAwesome based implementation of the social sign in buttons. It's small and awesome.

Requirements

FontAwesome 5:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css">

You can also use the Brands only, if you're not using FontAwesome in your setup:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/brands.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/fontawesome.css">

Installation

Put the social-login.css or social-login.less in your project.

<link rel="stylesheet" href="social-login.css">

Usage

Basic usage

A typical Social Login button is build up from an A element. I plan to support buttons in the future too! ❤️

| For a quick lookup: See the index.html example list!

To start a button simply create an A or element with the sb and sb-* class. Where the * is the vendor you're looking for. For example:

<a href="#" class="sb sb-facebook">Sign in with Facebook</a>

Results in a proper:

<a href="#" class="sb sb-twitter">Sign in with Twitter</a>

Results in a proper:

<a href="#" class="sb sb-google">Sign in with Google</a>

Results in a proper:

Helper classes

I've created some helper classes to help you out with some other things. Like spacing, block level items etc.

.sb-m-2 gives you a spacing of 2px on top and bottom

.sb-m-5 gives you a spacing of 5px on top and bottom

.sb-m-10 gives you a spacing of 10px on top and bottom

.sb-fw sets the width of the buttons to a fixed with of 220px, making sure all buttons are equally with

.sb-block displays the button as a block instead of inline

.sb-br-2 sets a border radius of 2px

.sb-br-5 sets a border radius of 5px

.sb-br-10 sets a border radius of 5px

.sb-nb disables the border line of a button

.sb-ct centers the text

Available buttons:

• .sb-apple
• .sb-facebook
• .sb-steam
• .sb-spotify
• .sb-discord
• .sb-wordpress
• .sb-twitch
• .sb-teamspeak
• .sb-slack
• .sb-youtube
• .sb-paypal
• .sb-google
• .sb-bitbucket
• .sb-twitter
• .sb-reddit
• .sb-adn
• .sb-bitbucket
• .sb-dropbox
• .sb-flickr
• .sb-foursquare
• .sb-github
• .sb-microsoft
• .sb-odnoklassniki
• .sb-openid
• .sb-pinterest
• .sb-soundcloud
• .sb-tumblr
• .sb-vimeo
• .sb-vk
• .sb-yahoo

Need another button?

Open up an issue!

Using it in a project?

Hit me up at benjamin[at]it-vision[dot]nl! I'd love to see it.

That's it

I would just love to type more about this neat lil' thingy, but this is just all there is to it. Feel free to contribute and suggest things.

Holy crap, that's easy!?

Yep it is, it was written because we needed an easy solution for a couple of websites.

Where can i pay?

You don't need to pay for this, but it's on GitHub so you probably knew that :-)

However if you want to donate: Click the button below: