From 979f34e796046411cc144461fcca50df7bccd0da Mon Sep 17 00:00:00 2001 From: Sam Date: Sun, 30 Jan 2011 14:04:57 +0000 Subject: [PATCH] first commit --- README | 0 blank.html | 25 +++++++ index.html | 28 ++++++++ social_buttons.css | 179 +++++++++++++++++++++++++++++++++++++++++++++++ social_buttons_icons.png | Bin 0 -> 2425 bytes 5 files changed, 232 insertions(+) create mode 100644 README create mode 100644 blank.html create mode 100644 index.html create mode 100644 social_buttons.css create mode 100644 social_buttons_icons.png diff --git a/README b/README new file mode 100644 index 0000000..e69de29 diff --git a/blank.html b/blank.html new file mode 100644 index 0000000..ce9b3c9 --- /dev/null +++ b/blank.html @@ -0,0 +1,25 @@ +

CSS social sign-in buttons

+ +

Firstly—why bother right?

+

Because CSS is so trendy. No not really, because this is really a practical solution. Let me explain:

+

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.

+

I previously used @rogie’s beautiful buttons (here) 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.

+

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.

+

OK so here they are (go on, give ‘em a click):

+ + +

And here’s how they work

+

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.

+

Want matching icons? Use Rogie King’s here

+

And here’s what I’d like

+

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:

+ + +

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! @smcllns.

+ +

Download the buttons!

diff --git a/index.html b/index.html new file mode 100644 index 0000000..70c628b --- /dev/null +++ b/index.html @@ -0,0 +1,28 @@ + + + + + + + + +
+
+ + + + +
+
+
+ + + + +
+ + diff --git a/social_buttons.css b/social_buttons.css new file mode 100644 index 0000000..a3e857f --- /dev/null +++ b/social_buttons.css @@ -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; +} \ No newline at end of file diff --git a/social_buttons_icons.png b/social_buttons_icons.png new file mode 100644 index 0000000000000000000000000000000000000000..51e8dfaf943b31554324b91a8ef7e54706d2dfe7 GIT binary patch literal 2425 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