Sam
il y a 13 ans
révision
979f34e796
5 fichiers modifiés avec 232 ajouts et 0 suppressions
-
+0 -0README
-
+25 -0blank.html
-
+28 -0index.html
-
+179 -0social_buttons.css
-
BINsocial_buttons_icons.png
+ 0
- 0
README
Voir le fichier
+ 25
- 0
blank.html
Voir le fichier
| @@ -0,0 +1,25 @@ | |||
| <h1>CSS social sign-in buttons</h1> | |||
| <h2>Firstly—why bother right?</h2> | |||
| <p>Because CSS is so trendy. No not really, because this is really a practical solution. Let me explain:</p> | |||
| <p>For social web apps, these buttons are basically our calls-to-actions. I’ve seen websites where designers have spent days on the BUY NOW button or the SIGN UP button, and then plonk in a crappy jpeg for “share on twitter” or that awful “Connect Facebook” button. You want your users to click these buttons, so they should be contextual and they should be appealing.</p> | |||
| <p>I previously used <http://twitter.com/rogie>@rogie</a>’s beautiful buttons (<a href="http://www.komodomedia.com/blog/2009/06/sign-in-with-twitter-facebook-and-openid/">here</a>) because they did a great job at the time. However, they're only available as png’s and now it’s undeniable that I need bigger ones, smaller ones, and I need to be able to say “Sign in with Facebook” sometimes, and “Connect your Facebook account” other times.</p> | |||
| <p>CSS-based designs, provided they don’t introduce unnecessary markup, are quicker to tweak and adjust, than creating sprites from a graphic editor for all the buttons and their various states. Sometimes you gotta do it, but for this heavy social stuff, IE6 really isn’t a significant concern and CSS does an incredible job.</p> | |||
| <h3>OK so here they are (go on, give ‘em a click):</h3> | |||
| <h2>And here’s how they work</h2> | |||
| <p>Sharing CSS files isn’t ideal; I hope the code is understandable but for reference: | |||
| There’s Google, Facebook, LinkedIn, and Twitter buttons right now, accessed by using either the sb_facebook, sb_google, sb_linkedin or sb_twitter class. | |||
| There’s only two sizes right now: 24px height and 48px height. You’ll mainly use 24px size, but for marketing pages it’s nice to have the 48px size. | |||
| The nested ** is important because Firefox forbids adjusting line-height on button elements and that’s a simple work around. | |||
| It doesn’t matter what the parent element is, it can be **** whatever you want. | |||
| For the parent element, set the width to auto or a fixed size for the desired effect.</p> | |||
| <p>Want matching icons? Use Rogie King’s <a href="http://www.komodomedia.com/blog/2009/06/social-network-icon-pack/">here</a></p> | |||
| <h2>And here’s what I’d like</h2> | |||
| <p>For you to have a pretty website and nice buttons :-) Feel free to use these buttons, they’re licensed under CC so it would be nice to attribute Bloop [http://bloop.co] if you use them. Tweet about this page if you’re totally chuffed. And finally, throw a donation if you’re supremely delighted that you now have this straight out of the box:</p> | |||
| <p>If I get up to $50 in donations, I’ll take some time to make the button set entirely scalable (using a vector font set for the logos) and I’ll add the rest of the popular service. For now, hope you enjoy! <a href="http://twitter.com/smcllns">@smcllns.</a></p> | |||
| <h2><a href="#">Download the buttons!</a></h2> | |||
+ 28
- 0
index.html
Voir le fichier
| @@ -0,0 +1,28 @@ | |||
| <html> | |||
| <head> | |||
| <link rel="stylesheet" type="text/css" href="reset.css" /> | |||
| <link rel="stylesheet" type="text/css" href="social_buttons.css" /> | |||
| <style> | |||
| article button { | |||
| margin: 10px 50px; | |||
| } | |||
| </style> | |||
| </head> | |||
| <body> | |||
| <article> | |||
| <header class="s24"></header> | |||
| <button class="social_buttons sb_24 sb_linkedin"><span>Connect LinkedIn</span></button> | |||
| <button class="social_buttons sb_24 sb_twitter"><span>Log-in to Twitter account</span></button> | |||
| <button class="social_buttons sb_24 sb_google"><span>Import Google contacts</span></button> | |||
| <button class="social_buttons sb_24 sb_facebook"><span>Download Facebook contacts</span></button> | |||
| </article> | |||
| <article> | |||
| <header class="s48"></header> | |||
| <button class="social_buttons sb_48 sb_facebook"><span>Sign in with Facebook</span></button> | |||
| <button class="social_buttons sb_48 sb_linkedin"><span>Sign in with LinkedIn</span></button> | |||
| <button class="social_buttons sb_48 sb_twitter"><span>Sign in with Twitter</span></button> | |||
| <button class="social_buttons sb_48 sb_google"><span>Sign in with Google</span></button> | |||
| </article> | |||
| </body> | |||
| </html> | |||
+ 179
- 0
social_buttons.css
Voir le fichier
| @@ -0,0 +1,179 @@ | |||
| /* | |||
| CSS Social Sign-in Buttons by Bloop [http://bloop.co] are licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. | |||
| Please link to Bloop [http://bloop.co] somewhere on the page when you use these buttons. | |||
| Contact @smcllns with questions about permissions but you're basically free to do what you like. | |||
| */ | |||
| /*BUTTON WIDTH | |||
| Use width:auto or a fixed width on .social_buttons | |||
| */ | |||
| /*Resets*/ | |||
| .social_buttons { | |||
| border: none; | |||
| color: #fff !important; | |||
| cursor: pointer; | |||
| font-weight: bold; | |||
| letter-spacing: 0; | |||
| outline: none; | |||
| text-decoration: none !important; | |||
| } | |||
| /*24px Height Button*/ | |||
| .sb_24 > span, | |||
| .sb_24 > span:before { | |||
| font-size: 12px; | |||
| height: 22px; | |||
| line-height: 22px; | |||
| } | |||
| .sb_24 > span:before { | |||
| width: 22px; | |||
| } | |||
| .sb_24 > span { | |||
| padding-right: 10px; | |||
| } | |||
| .sb_24, | |||
| .sb_24 > span { | |||
| -moz-border-radius: 3px; | |||
| -webkit-border-radius: 3px; | |||
| border-radius: 3px; | |||
| } | |||
| /*40px Height Button*/ | |||
| .sb_48 > span, | |||
| .sb_48 > span:before { | |||
| font-size: 18px; | |||
| height: 36px; | |||
| line-height: 36px; | |||
| } | |||
| .sb_48 > span:before { | |||
| width: 40px; | |||
| } | |||
| .sb_48 > span { | |||
| padding-right: 20px; | |||
| } | |||
| .sb_48, | |||
| .sb_48 > span { | |||
| -moz-border-radius: 5px; | |||
| -webkit-border-radius: 5px; | |||
| border-radius: 5px; | |||
| } | |||
| .sb_48 > span:before { | |||
| } | |||
| /*Brand Icons*/ | |||
| .social_buttons > span:before { | |||
| background: url(social_buttons_icons.png) no-repeat; | |||
| } | |||
| .sb_facebook.sb_24 > span:before { | |||
| background-position: 5px 4px; | |||
| } | |||
| .sb_linkedin.sb_24 > span:before { | |||
| background-position: 5px -46px; | |||
| } | |||
| .sb_twitter.sb_24 > span:before { | |||
| background-position: 5px -95px; | |||
| } | |||
| .sb_google.sb_24 > span:before { | |||
| background-position: 5px -146px; | |||
| } | |||
| .sb_facebook.sb_48 > span:before { | |||
| background-position: -40px 7px; | |||
| } | |||
| .sb_linkedin.sb_48 > span:before { | |||
| background-position: -40px -42px; | |||
| } | |||
| .sb_twitter.sb_48 > span:before { | |||
| background-position: -40px -91px; | |||
| } | |||
| .sb_google.sb_48 > span:before { | |||
| background-position: -40px -142px; | |||
| } | |||
| /*Brand Colors*/ | |||
| .sb_facebook { | |||
| background: #5E76AB; | |||
| border-top: 1px solid #5E76AB; | |||
| } | |||
| .sb_facebook:hover { | |||
| background: #4863AE; | |||
| } | |||
| .sb_linkedin { | |||
| background: #4A95BF; | |||
| border-top: 1px solid #4A95BF; | |||
| } | |||
| .sb_linkedin:hover { | |||
| background: #3B88C5; | |||
| } | |||
| .sb_google { | |||
| background: #6D88EA; | |||
| border-top: 1px solid #6D88EA; | |||
| } | |||
| .sb_google:hover { | |||
| background: #4E6CF7; | |||
| } | |||
| .sb_twitter { | |||
| background: #A7E7EB; | |||
| border-top: 1px solid #A7E7EB; | |||
| } | |||
| .sb_twitter:hover { | |||
| background: #85DCE2; | |||
| } | |||
| .sb_twitter > span { | |||
| border-bottom-color: rgba(0,0,0,0.3) !important; | |||
| border-top-color: rgba(255,255,255,0.7) !important; | |||
| color: #3C6B9C !important; | |||
| text-shadow: 0 1px 1px rgba(255,255,255,0.7) !important; | |||
| } | |||
| /*Common Design*/ | |||
| .social_buttons { | |||
| display: block; | |||
| font-family: "Lucida Grande", Tahoma, sans-serif; | |||
| position: relative; | |||
| text-shadow: 0 -1px 1px rgba(0,0,0,0.5); | |||
| } | |||
| .social_buttons > span { | |||
| background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.2)), color-stop(40%, rgba(255,255,255,0)), color-stop(70%, rgba(0,0,0,0)), to(rgba(0,0,0,0.1))); | |||
| border: 1px solid rgba(0,0,0,0.1); | |||
| border-bottom-color: rgba(0,0,0,0.5); | |||
| border-top-color: rgba(255,255,255,0.5); | |||
| display: block; | |||
| overflow: visible; | |||
| white-space: nowrap; | |||
| } | |||
| .social_buttons > span:before { | |||
| -moz-box-shadow: 1px 0 1px rgba(255,255,255,0.2); | |||
| -webkit-box-shadow: 1px 0 1px rgba(255,255,255,0.2); | |||
| background-repeat: no-repeat; | |||
| border-right: 1px solid rgba(0,0,0,0.1); | |||
| box-shadow: 1px 0 1px rgba(255,255,255,0.2); | |||
| content: ""; | |||
| display: block; | |||
| float: left; | |||
| margin-right: 10px; | |||
| } | |||
| /*Interaction*/ | |||
| .social_buttons:hover > span { | |||
| border-bottom: 1px solid rgba(0,0,0,0.7); | |||
| border-top: 1px solid rgba(255,255,255,0.5); | |||
| } | |||
| .social_buttons:active > span { | |||
| background: -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,255,0.3)), color-stop(30%, rgba(255,255,255,0)), color-stop(50%, rgba(0,0,0,0)), to(rgba(0,0,0,0.2))); | |||
| border-bottom: 1px solid rgba(0,0,0,0.3); | |||
| border-top: 1px solid rgba(255,255,255,0.2); | |||
| } | |||
| .sb_24:active > span { | |||
| line-height: 23px; | |||
| } | |||
| .sb_48:active > span { | |||
| line-height: 38px; | |||
| } | |||
| .sb_48:active > span:before { | |||
| margin-top: 1px; | |||
| } | |||
| .sb_24:active > span:before { | |||
| margin-top: 1px; | |||
| } | |||
BIN
social_buttons_icons.png
Voir le fichier
| Avant | Après |
|---|---|
|
|
| Largeur: 100 | Hauteur: 200 | Taille: 2.4 KiB |