-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
72 lines (67 loc) · 3.61 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Buttons in CSS3</title>
<link rel="stylesheet" href="social-login.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/brands.css">
</head>
<body style="font-family: sans-serif">
<h1>Social buttons</h1>
<hr/>
<h2>All buttons</h2>
<div style="column-count: 3;">
<a href="#" class="sb sb-facebook sb-m-2 sb-fw">Sign in with Facebook</a>
<a href="#" class="sb sb-steam sb-m-2 sb-fw">Sign in with Steam</a>
<a href="#" class="sb sb-spotify sb-m-2 sb-fw">Sign in with Spotify</a>
<a href="#" class="sb sb-discord sb-m-2 sb-fw">Sign in with Discord</a>
<a href="#" class="sb sb-wordpress sb-m-2 sb-fw">Sign in with Wordpress</a>
<a href="#" class="sb sb-twitch sb-m-2 sb-fw">Sign in with Twitch</a>
<a href="#" class="sb sb-teamspeak sb-m-2 sb-fw">Sign in with Teamspeak</a>
<a href="#" class="sb sb-slack sb-m-2 sb-fw">Sign in with Slack</a>
<a href="#" class="sb sb-youtube sb-m-2 sb-fw">Sign in with YouTube</a>
<a href="#" class="sb sb-paypal sb-m-2 sb-fw">Sign in with PayPal</a>
<a href="#" class="sb sb-google sb-m-2 sb-fw">Sign in with Google</a>
<a href="#" class="sb sb-bitbucket sb-m-2 sb-fw">Sign in with BitBucket</a>
<a href="#" class="sb sb-twitter sb-m-2 sb-fw">Sign in with Twitter</a>
<a href="#" class="sb sb-reddit sb-m-2 sb-fw">Sign in with Reddit</a>
<a href="#" class="sb sb-adn sb-m-2 sb-fw">Sign in with ADN</a>
<a href="#" class="sb sb-bitbucket sb-m-2 sb-fw">Sign in with BitBucket</a>
<a href="#" class="sb sb-dropbox sb-m-2 sb-fw">Sign in with Dropbox</a>
<a href="#" class="sb sb-flickr sb-m-2 sb-fw">Sign in with Flickr</a>
<a href="#" class="sb sb-foursquare sb-m-2 sb-fw">Sign in with Foursquare</a>
<a href="#" class="sb sb-github sb-m-2 sb-fw">Sign in with Github</a>
<a href="#" class="sb sb-microsoft sb-m-2 sb-fw">Sign in with Microsoft</a>
<a href="#" class="sb sb-odnoklassniki sb-m-2 sb-fw">Sign in with OK.Ru</a>
<a href="#" class="sb sb-openid sb-m-2 sb-fw">Sign in with OpenID</a>
<a href="#" class="sb sb-pinterest sb-m-2 sb-fw">Sign in with Pinterest</a>
<a href="#" class="sb sb-soundcloud sb-m-2 sb-fw">Sign in with Soundcloud</a>
<a href="#" class="sb sb-tumblr sb-m-2 sb-fw">Sign in with Tumblr</a>
<a href="#" class="sb sb-vimeo sb-m-2 sb-fw">Sign in with Vimeo</a>
<a href="#" class="sb sb-vk sb-m-2 sb-fw">Sign in with VK</a>
<a href="#" class="sb sb-yahoo sb-m-2 sb-fw">Sign in with Yahoo</a>
<a href="#" class="sb sb-apple sb-m-2 sb-fw">Sign in with Apple</a>
</div>
<hr/>
<h2>Special features</h2>
<b>Border radius 2</b> <i>.sb-br-2</i>
<a href="#" class="sb sb-facebook sb-br-2 sb-fw sb-b sb-m-10">Sign in with Facebook</a>
<b>Border radius 5</b> <i>.sb-br-5</i>
<a href="#" class="sb sb-facebook sb-br-5 sb-fw sb-b sb-m-10">Sign in with Facebook</a>
<b>Border radius 10</b> <i>.sb-br-10</i>
<a href="#" class="sb sb-facebook sb-br-10 sb-fw sb-b sb-m-10">Sign in with Facebook</a>
<br/><br/>
<b>No border</b> <i>.sb-nb</i>
<a href="#" class="sb sb-facebook sb-nb sb-fw sb-b sb-m-10">Sign in with Facebook</a>
<br/><br/>
<b>Text center</b> <i>.sb-ct</i>
<a href="#" class="sb sb-facebook sb-nb sb-fw sb-b sb-m-10 sb-ct">Sign in with Facebook</a>
<br/><br/>
<b>Small button</b> <i>.sb-xs</i>
<a href="#" class="sb sb-facebook sb-nb sb-fw sb-b sb-m-10 sb-xs">Sign in with Facebook</a>
<b>Button as <button> element</i>
<button type="submit" class="sb sb-facebook sb-nb sb-b sb-m-10">Sign in with Facebook</button>
<hr/>
</body>
</html>