forked from necolas/css3-social-signin-buttons
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
153 lines (125 loc) · 6.82 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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS3 Social Sign-in Buttons</title>
<meta name="description" content="Using CSS3 to create social sign-in buttons for Facebook, Twitter, Google, GitHub, Windows Live ID, Yahoo!, and OpenID">
<style>
/* BASE */
html { font-size:100%; }
body { padding: 40px 0 20px; margin: 0; font: 13px/1.333 "lucida grande", tahoma, sans-serif; color: #333; background: #fff;}
a, a:visited { color: #980905; }
a:hover, a:focus, a:active { text-decoration: none; }
h1 { margin: 0 0 0.5em; font-size: 28px; font-weight: normal; }
h2 { margin: 0 0 0.75em; font-size: 15px; }
p { margin: 0 0 1.333em; }
em { font-style: italic; }
table { border-collapse: separate; border-spacing: 0; margin: 0; vertical-align: middle; }
th { font-weight: bold; }
th, td { padding: 5px 25px 5px 5px; text-align: left; vertical-align: middle; }
pre, code { font-family: monospace, sans-serif; font-size: 1em; color:#080; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
ul { list-style: square; margin: 1em 0 1em 0px; padding: 0; }
/* TEMPLATE */
.container { position:relative; overflow:hidden; max-width: 600px; _width: 600px; padding: 40px 60px; border: 1px solid #ccc; margin: 0 auto; background: #fff; }
.container pre,
.container .prettyprint { padding: 0; border: 0; margin: 0 0 20px; background: #fff; }
.ribbon { position: absolute; top: -1px; right: -1px; opacity: 0.9; }
.ribbon:hover, .ribbon:focus, .ribbon:active { opacity: 1; }
.ribbon img { display: block; border: 0; }
.header { padding-right: 80px; }
.header p { font-size: 18px; color: #808080; }
.section { margin: 40px 0 20px; }
.example { padding: 20px; border: 1px solid #ccc; margin: 10px -20px 20px; }
.example p { margin: 15px 0 0; }
.example p:first-child { margin: 0; }
.footer { margin: 20px 0 50px; font-size: 11px; color: #666; text-align: center; }
.footer a { color: #666;}
/* SMALL */
@media (max-width: 500px) {
body { padding: 0; }
.container { padding: 20px 30px; }
.footer { margin-bottom: 20px; }
}
</style>
<link rel="stylesheet" href="auth-buttons.css">
<!-- prettyify -->
<link rel="stylesheet" href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css">
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
</head>
<body onload="prettyPrint()">
<div class="container">
<a class="ribbon" href="http://github.com/necolas/css3-social-signin-buttons" target="_blank"><img src="http://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
<div class="header">
<h1>CSS3 Social Sign-in Buttons</h1>
</div>
<div class="section">
<h2>Standard Buttons</h2>
<p>To create the default sign-in button, add a class of <code>btn-auth</code> and <code>btn-[service]</code> (where <code>[service]</code> is one of the supported social sign-in services) to any appropriate element (most likely an anchor).</p>
<div class="example">
<pre class="prettyprint"><code><a class="btn-auth btn-[service]" href="#">
Sign in with <b>[service]</b>
</a></code></pre>
<div>
<p><a class="btn-auth btn-facebook" href="#button">Sign in with <b>Facebook</b></a></p>
<p><button class="btn-auth btn-twitter">Sign in with <b>Twitter</b></button></p>
<p><a class="btn-auth btn-google" href="#button">Sign in with <b>Google</b></a></p>
<p><button class="btn-auth btn-github">Sign in with <b>GitHub</b></button></p>
<p><a class="btn-auth btn-yahoo" href="#button">Sign in with <b>Yahoo!</b></a></p>
<p><a class="btn-auth btn-windows" href="#button">Sign in with <b>Windows Live ID</b></a></p>
<p><a class="btn-auth btn-openid" href="#button">Sign in with <b>OpenID</b></a></p>
</div>
</div>
</div>
<div class="section">
<h2>Larger buttons</h2>
<p>To create larger buttons include an additional class of <code>large</code>.</p>
<div class="example">
<pre class="prettyprint"><code><a class="btn-auth btn-[service] large" href="#">
Sign in with <b>[service]</b>
</a></code></pre>
<div>
<p><a class="btn-auth btn-facebook large" href="#button">Sign in with <b>Facebook</b></a></p>
<p><a class="btn-auth btn-twitter large" href="#button">Sign in with <b>Twitter</b></a></p>
<p><a class="btn-auth btn-google large" href="#button">Sign in with <b>Google</b></a></p>
<p><a class="btn-auth btn-github large" href="#button">Sign in with <b>GitHub</b></a></p>
<p><a class="btn-auth btn-yahoo large" href="#button">Sign in with <b>Yahoo!</b></a></p>
<p><a class="btn-auth btn-windows large" href="#button">Sign in with <b>Windows Live ID</b></a></p>
<p><a class="btn-auth btn-openid large" href="#button">Sign in with <b>OpenID</b></a></p>
</div>
</div>
</div>
<div class="section">
<h2>Supported services</h2>
<ul>
<li>Facebook
<li>GitHub
<li>Google
<li>OpenID
<li>Twitter
<li>Windows Live ID
<li>Yahoo!
</ul>
</div>
<div class="section">
<h2>Source code</h2>
<p>Available on GitHub: <a href="http://github.com/necolas/css3-social-signin-buttons">necolas/css3-social-signin-buttons</a></p>
<p>Download it in either <a href="http://github.com/necolas/css3-social-signin-buttons/zipball/master">zip</a> or <a href="http://github.com/necolas/css3-social-signin-buttons/tarball/master">tar</a> formats.</p>
<p>Clone the project with Git by running:<br>
<code>$ git clone git://github.com/necolas/css3-social-signin-buttons.git</code></p>
</div>
<div class="section">
<h2>Browser compatibility</h2>
<p>Full support: Google Chrome, Firefox 3.5+, Safari 4+, IE 10+, Opera 11.10+.</p>
<p><strong>Note:</strong> Some CSS3 enhancements are not supported in older versions of Opera and IE. The use of icons is not supported in IE 6 or IE 7.</p>
</div>
<div class="section">
<h2>License</h2>
<p>Public domain: <a href="http://unlicense.org/">http://unlicense.org/</a></p>
</div>
</div>
<div class="footer">
<a href="http://github.com/necolas/css3-social-signin-buttons">CSS3 Social Sign-in Buttons</a> by <a href="http://nicolasgallagher.com">Nicolas Gallagher</a>.
</div>
</body>
</html>