<commit_before>#Slide Social Buttons

Slide Social Buttons are a fun way to display your social media buttons. 

These buttons are inspired by the [Supersteil blog](http://supersteil.com/blog) but instead of using jQuery for the animation, they use CSS transforms &amp transitions.

Feel free to [let me know](http://www.twitter.com/cmyee) if you use Slide Social Buttons on one of your websites.

[View Demo](http://christopheryee.ca/slide-social-buttons/)

##Features

- Uses CSS transforms & transitions.
- Uses Icon Fonts, perfect for retina displays.
- Degrades gracefully for IE 8 - 9 & touch devices.
- It's responsive!

##Requirements

- [Modernizr](http://www.modernizr.com/)
- [Font Awesome](http://fortawesome.github.io/Font-Awesome/)

##Usage

Include Font Awesome, Modernizr and the Slide Social CSS in your header.

```html
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="path/to/your/css/slide-social-buttons.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
```

Pick and choose which social buttons you wish to use, be sure to add the appropriate [like](https://developers.facebook.com/docs/reference/plugins/like/)/[tweet](https://twitter.com/about/resources/buttons)/[+1](https://developers.google.com/+/web/+1button/?hl=en) markup and JS as required.

```html
<div class="slide-social">
    <div class="button">
    	<!-- Place FB Like Button Here -->
    </div>
    <div class="facebook icon">
        <i class="icon-facebook"></i>
    </div>
    <div class="facebook slide"><p>like</p></div>
</div>
```

You can find the markup for additional social buttons in the demo file (index.html).

##Browser Compatibility

Desktop

- IE 8-9
- Chrome
- Firefox
- Safari (Mac)

Mobile

- Chrome (Android 4.2.2)
- Safari (iOS 6)

##Version History

1.0

- Inital release

##Known Issues

- IE 10 hover issues with FB Like, Twitter & Google+ buttons. Not usuable.
- iOS breaks the hover animation, the buttons will degrade gracefully for touch devices.

##Thanks to

- [Supersteil](http://supersteil.com/)
- [HTML5 Boilerplate](http://html5boilerplate.com/)
- [Modernizr](http://modernizr.com/)

[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/christophery/slide-social-buttons/trend.png)](https://bitdeli.com/free "Bitdeli Badge")<commit_msg>Updated readme to reflect changes in 2.0<commit_after>#Slide Social Buttons

Slide Social Buttons are a fun way to display your social media buttons.

The buttons are inspired by the [Supersteil blog](http://supersteil.com/blog) but instead of using jQuery for the animation, they use CSS transforms & transitions.

As of version 2.0, they're only compatible with CSS3-compliant browsers. This mainly means <strong>no IE 8</strong>. If you still need IE8 compatibility, version 1.0 will always be available.

Feel free to let [the original creator](http://www.twitter.com/cmyee) know if you use Slide Social Buttons in one of your websites.</p>

View Demo: [v 1.0](http://christopheryee.ca/slide-social-buttons/) | [v 2.0](http://shared.bhstudios.org/_plug/slide-social-buttons/)

##Features

- Uses CSS transforms & transitions.
- Uses Font Icons, perfect for retina displays.
- It's responsive!

##Requirements

- [Modernizr](http://www.modernizr.com/)
- [Font Awesome 4.x](http://fortawesome.github.io/Font-Awesome/)

##Usage

Include Font Awesome and the Slide Social CSS in your header.

```html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="path/to/your/css/slide-social-buttons.css">
```

Pick and choose which social buttons you wish to use, be sure to add the appropriate [like](https://developers.facebook.com/docs/reference/plugins/like/)/[tweet](https://twitter.com/about/resources/buttons)/[+1](https://developers.google.com/+/web/+1button/?hl=en) markup and JS as required.

```html
<div class="slide-social">
    <div class="ss-button">
    	<!-- Place FB Like Button Here -->
    </div>
    <div class="facebook-bg ss-icon">
        <i class="fa fa-facebook"></i>
    </div>
    <div class="facebook-bg ss-slide"><p>like</p></div>
</div>
```

You can find the markup for additional social buttons in the demo file (index.html).

##Browser Compatibility

- Any evergreen browser <sub>([What's that?](http://eisenbergeffect.bluespire.com/evergreen-browsers/))</sub>

##Version History

2.0 (2015-01-04)

	! Blue Husky Studios refined it to work better as a plugin to an existing site.
		- REMOVED IE8 COMPATIBILITY - now designed for evergreen browsers.
		! Updated Font Awesome requirement to 4.x
		! Removed requirement for Modernizr.js
		+ Added .tumblr-bg
		! Removed need for .ss-slide p element
		- Removed rule that never showed Twitter backup "Tweet" link
		! Implemented calc() positioning when possible
		. Changed px to em where possible
		. Moved white line from left of .ss-slide p to right of .ss-icon
		! Implemented absolute positioning on .ss-slide instead of float
		. Changed .ss-button positioning from pixels to percents
		. Changed .ss-button positioning from margin-based to top- and left- based
		. Reformatted documentation to fit Blue Husky standards
		+ Added the 'ss-' prefix to any generic class name
		! Made .slide-social relative so internal buttons don't align with another positioned ancestor
		! Gave .ss-slide a 2-second return delay so button is still uncovered when clicking in IE.

1.0

- Inital release

##Known Issues

- IE 10 hover issues with FB Like, Twitter & Google+ buttons. Not usuable.
- iOS breaks the hover animation, the buttons will degrade gracefully for touch devices.

##Thanks to

- [Supersteil](http://supersteil.com/)
- [HTML5 Boilerplate](http://html5boilerplate.com/)
- [<NAME>](http://christopheryee.ca/)

[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/christophery/slide-social-buttons/trend.png)](https://bitdeli.com/free "Bitdeli Badge")
{'fraction_non_alphanumeric': 0.1310929961736816, 'fraction_numerical': 0.011645316918981867, 'mean_word_length': 4.030962343096235, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 41, 'https://': 11, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3153910', 'n_tokens_mistral': 2015, 'n_tokens_neox': 1869, 'n_words': 603}