-
Notifications
You must be signed in to change notification settings - Fork 0
/
css3buttons.html
224 lines (212 loc) · 11.1 KB
/
css3buttons.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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 Buttons</title>
<link rel="stylesheet" type="text/css" href="http://haeckdesign.com/media/files/demo/css3buttons/css/haeck.css" />
<style>
html {
background: #f0f0eb;
font-family: "Helvetica", sans-serif;
}
body {
background: #FFF;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.5);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.5);
box-shadow: 0 1px 1px rgba(0,0,0,0.5);
-webkit-border-radius: 0 0 2px 2px;
-moz-border-radius: 0 0 2px 2px;
border-radius: 0 0 2px 2px;
width: 100%;
height: 100%;
position: absolute;
top: 0;
}
body .haeck {
margin: 8px 4px;
font-size: 13px;
}
h2 {
font-family: 'Quicksilver', arial, sans-serif;
font-size: 17px;
font-weight: normal;
padding: 0 0 0.2em;
border-bottom: 1px solid #ddd;
}
</style>
<!--[if IE]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<h2 id="popular-kids">Required</h2>
<a href="#" class="haeck facebook">Sign in with Facebook</a>
<a href="#" class="haeck googleplus">Sign in with Google+</a>
<a href="#" class="haeck twitter">Sign in with Twitter</a>
<a href="#" class="haeck linkedin">Sign in with LinkedIn</a>
<h2 id="cool-kids">Suggested</h2>
<a href="#" class="haeck dropbox">Sync with Dropbox</a>
<a href="#" class="haeck evernote">Clip to Evernote</a>
<a href="#" class="haeck forrst">Follow me on Forrst</a>
<a href="#" class="haeck dribbble">Sign in with Dribbble</a>
<a href="#" class="haeck cloudapp">Sign in to CloudApp</a>
<a href="#" class="haeck github">Fork me on Github</a>
<a href="#" class="haeck spotify">Play on Spotify</a>
<a href="#" class="haeck instapaper">Read It Later</a>
<a href="#" class="haeck soundcloud">Follow me on Soundcloud</a>
<a href="#" class="haeck tumblr">Follow me on Tumblr</a>
<a href="#" class="haeck smashing">Read on Smashing Magazine</a>
<a href="#" class="haeck itunes">Available on iTunes</a>
<a href="#" class="haeck appstore">Available on the App Store</a>
<a href="#" class="haeck macstore">Available on the Mac App Store</a>
<a href="#" class="haeck android">Available on Android Market</a>
<a href="#" class="haeck pinterest">Follow me on Pinterest</a>
<a href="#" class="haeck quora">Follow me on Quora</a>
<a href="#" class="haeck lanyrd">Attend on Lanyrd</a>
<h2 id="not-so-cool-kids">Useful</h2>
<a href="#" class="haeck paypal">Pay with Paypal</a>
<a href="#" class="haeck amazon">Sign in with Amazon</a>
<a href="#" class="haeck skype">Call me on Skype</a>
<a href="#" class="haeck lastfm">Sign in with Last.fm</a>
<a href="#" class="haeck yelp">Write a review on Yelp</a>
<a href="#" class="haeck foursquare">Check in with foursquare</a>
<a href="#" class="haeck klout">Influence with Klout</a>
<h2 id="older-kids">Classic</h2>
<a href="#" class="haeck wikipedia">View on Wikipedia</a>
<a href="#" class="haeck disqus">Sign in with Disqus</a>
<a href="#" class="haeck intensedebate">Sign in with IntenseDebate</a>
<a href="#" class="haeck google">Sign in with Google</a>
<a href="#" class="haeck gmail">Sign in with Gmail</a>
<a href="#" class="haeck vimeo">Upload to Vimeo</a>
<a href="#" class="haeck scribd">Read more on Scribd</a>
<a href="#" class="haeck youtube">Subscribe on YouTube</a>
<a href="#" class="haeck wordpress">Sign in with WordPress</a>
<a href="#" class="haeck songkick">Sign in with Songkick</a>
<a href="#" class="haeck posterous">Sign in with Posterous</a>
<a href="#" class="haeck eventbrite">Sign in with Eventbrite</a>
<a href="#" class="haeck flattr">Tip with Flattr</a>
<a href="#" class="haeck plancast">Follow me on Plancast</a>
<h2 id="smelly-kids">Vintage</h2>
<a href="#" class="haeck yahoo">Submit resume for CEO</a>
<a href="#" class="haeck ie">Download Internet Explorer 5</a>
<a href="#" class="haeck meetup">Report bugs with Meetup.com</a>
<a href="#" class="haeck openid">Learn how-to-use OpenID</a>
<a href="#" class="haeck html5">Register now for HTML6</a>
<a href="#" class="haeck aol">Chat with your parents</a>
<h2 id="quiet-kids">Functional</h2>
<a href="#" class="haeck guest">Sign in as guest</a>
<a href="#" class="haeck creativecommons">View Creative Commons Licence</a>
<a href="#" class="haeck rss">Subscribe to RSS</a>
<a href="#" class="haeck chrome">Add to Chrome</a>
<a href="#" class="haeck eventasaurus">Sign up for Eventasaurus</a>
<a href="#" class="haeck weibo">Join me on Weibo</a>
<a href="#" class="haeck plurk">Sign in with Plurk</a>
<a href="#" class="haeck grooveshark">Play on Grooveshark</a>
<a href="#" class="haeck blogger">Post on Blogger</a>
<a href="#" class="haeck viadeo">Sign in with Viadeo</a>
<a href="#" class="haeck podcast">Subscribe to this Podcast</a>
<a href="#" class="haeck fivehundredpx">View Portfolio on 500px</a>
<a href="#" class="haeck bitcoin">Bitcoin accepted here</a>
<a href="#" class="haeck ninetyninedesigns">View Portfolio on 99Designs</a>
<a href="#" class="haeck pinboard">Bookmark with Pinboard</a>
<a href="#" class="haeck stumbleupon">Stumble!</a>
<a href="#" class="haeck myspace">Find me on Myspace</a>
<a href="#" class="haeck windows">Sign in with Windows Live</a>
<a href="#" class="haeck eventful">Find Events with Eventful</a>
<a href="#" class="haeck xing">Sign in with Xing</a>
<a href="#" class="haeck flickr">Upload to Flickr</a>
<a href="#" class="haeck delicious">Sign in with Del.icio.us</a>
<a href="#" class="haeck googleplay">Download from Google Play</a>
<a href="#" class="haeck opentable">Reserve with OpenTable</a>
<a href="#" class="haeck digg">Digg this</a>
<a href="#" class="haeck reddit">Share on Reddit</a>
<h2 id="multipurpose-kids">Useful</h2>
<a href="#" class="haeck call">Call a phone</a>
<a href="#" class="haeck email">Send a message</a>
<a href="#" class="haeck cal">Add to calendar</a>
<a href="#" class="haeck cart">Add to cart</a>
<a href="#" class="haeck print">Print this page</a>
<a href="#" class="haeck primary">Primary action</a>
<a href="#" class="haeck secondary">Secondary action</a>
<h2 id="icons">Basic</h2>
<a href="#" class="haeck icon facebook">Sign in with Facebook</a>
<a href="#" class="haeck icon googleplus">Sign in with Google+</a>
<a href="#" class="haeck icon twitter">Sign in with Twitter</a>
<a href="#" class="haeck icon google">Sign in with Google</a>
<a href="#" class="haeck icon linkedin">Sign in with LinkedIn</a>
<a href="#" class="haeck icon paypal">Pay with Paypal</a>
<a href="#" class="haeck icon amazon">Sign in with Amazon</a>
<a href="#" class="haeck icon dropbox">Sync with Dropbox</a>
<a href="#" class="haeck icon evernote">Clip to Evernote</a>
<a href="#" class="haeck icon skype">Call me on Skype</a>
<a href="#" class="haeck icon guest">Sign in as guest</a>
<a href="#" class="haeck icon spotify">Play on Spotify</a>
<a href="#" class="haeck icon lastfm">Sign in with Last.fm</a>
<a href="#" class="haeck icon songkick">Sign in with Songkick</a>
<a href="#" class="haeck icon forrst">Follow me on Forrst</a>
<a href="#" class="haeck icon dribbble">Sign in with Dribbble</a>
<a href="#" class="haeck icon cloudapp">Sign in to CloudApp</a>
<a href="#" class="haeck icon github">Fork me on Github</a>
<a href="#" class="haeck pinterest icon">Follow me on Pinterest</a>
<a href="#" class="haeck quora icon">Follow me on Quora</a>
<a href="#" class="haeck pinboard icon">Bookmark with Pinboard</a>
<a href="#" class="haeck lanyrd icon">Attend on Lanyrd</a>
<a href="#" class="haeck icon itunes">Download on iTunes</a>
<a href="#" class="haeck icon android">Download on Android</a>
<a href="#" class="haeck icon disqus">Sign in with Disqus</a>
<a href="#" class="haeck icon yahoo">Sign in with Yahoo</a>
<a href="#" class="haeck icon vimeo">Upload to Vimeo</a>
<a href="#" class="haeck icon chrome">Add to Chrome</a>
<a href="#" class="haeck icon ie">Get a new browser</a>
<a href="#" class="haeck icon html5">Made from HTML5</a>
<a href="#" class="haeck icon instapaper">Read It Later</a>
<a href="#" class="haeck icon scribd">Read more on Scribd</a>
<a href="#" class="haeck icon wikipedia">View on Wikipedia</a>
<a href="#" class="haeck icon flattr">Tip with Flattr</a>
<a href="#" class="haeck icon tumblr">Follow me on Tumblr</a>
<a href="#" class="haeck icon posterous">Subscribe to my Posterous</a>
<a href="#" class="haeck icon gowalla">Check in with Gowalla</a>
<a href="#" class="haeck icon foursquare">Check in with foursquare</a>
<a href="#" class="haeck icon yelp">Write a review on Yelp</a>
<a href="#" class="haeck icon soundcloud">Follow me on Soundcloud</a>
<a href="#" class="haeck icon smashing">Read on Smashing Magazine</a>
<a href="#" class="haeck icon wordpress">Sign in with WordPress</a>
<a href="#" class="haeck icon intensedebate">Sign in with IntenseDebate</a>
<a href="#" class="haeck icon openid">Sign in with OpenID</a>
<a href="#" class="haeck icon gmail">Sign in with Gmail</a>
<a href="#" class="haeck icon eventbrite">Sign in with Eventbrite</a>
<a href="#" class="haeck icon eventasaurus">Sign in with Eventasaurus</a>
<a href="#" class="haeck icon meetup">Sign in with Meetup.com</a>
<a href="#" class="haeck icon aol">Sign in with AIM</a>
<a href="#" class="haeck icon plancast">Follow me on Plancast</a>
<a href="#" class="haeck icon youtube">Subscribe on YouTube</a>
<a href="#" class="haeck icon appstore">Available on the Mac App Store</a>
<a href="#" class="haeck icon creativecommons">View Creative Commons Licence</a>
<a href="#" class="haeck icon rss">Subscribe to RSS</a>
<a href="#" class="haeck weibo icon">Follow me on Weibo</a>
<a href="#" class="haeck plurk icon">Follow me on Plurk</a>
<a href="#" class="haeck grooveshark icon">Follow me on Grooveshark</a>
<a href="#" class="haeck blogger icon">Post on Blogger</a>
<a href="#" class="haeck viadeo icon">Sign in with Viadeo</a>
<a href="#" class="haeck podcast icon">Subscribe to this Podcast</a>
<a href="#" class="haeck fivehundredpx icon">View Portfolio on 500px</a>
<a href="#" class="haeck bitcoin icon">Bitcoin accepted here</a>
<a href="#" class="haeck ninetyninedesigns icon">View Portfolio on 99Designs</a>
<a href="#" class="haeck stumbleupon icon">Stumble!</a>
<a href="#" class="haeck itunes icon">Download on iTunes</a>
<a href="#" class="haeck myspace icon">Find me on Myspace</a>
<a href="#" class="haeck windows icon">Sign in with Windows Live</a>
<a href="#" class="haeck eventful icon">Find Events with Eventful</a>
<a href="#" class="haeck klout icon">Influence with Klout</a>
<a href="#" class="haeck xing icon">Sign in with Xing</a>
<a href="#" class="haeck flickr icon">Upload to Flickr</a>
<a href="#" class="haeck delicious icon">Sign in with Del.icio.us</a>
<a href="#" class="haeck googleplay icon">Download from Google Play</a>
<a href="#" class="haeck opentable icon">Reserve with OpenTable</a>
<a href="#" class="haeck digg icon">Digg this</a>
<a href="#" class="haeck reddit icon">Share on Reddit</a>
<a href="#" class="haeck call icon">Call a phone</a>
<a href="#" class="haeck email icon">Send a message</a>
<a href="#" class="haeck cal icon">Add to calendar</a>
<a href="#" class="haeck print icon">Print this page</a>
<a href="#" class="haeck cart icon">Add to cart</a>
</body>
</html>