<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<div class="button3d-container">
	<a class="button3d button3d--ltw" href="">
		<span class="button3d__face button3d__face--front button3d__face--front--ltw">
			Launch the Website<i class="fa fa-external-link"></i>
		</span>
		<span class="button3d__face button3d__face--bottom button3d__face--bottom--ltw">
			Launch the Website<i class="fa fa-external-link"></i>
		</span>
	</a>
  
	<div class="button3d button3d--sof" href="">
		<div class="button3d__face button3d__face--front button3d__face--front--sof">
			<i class="fa fa-facebook-official"></i>Like on facebook
		</div>
		<div class="button3d__face button3d__face--bottom button3d__face--bottom--sof">
			<div class="social-button">
				<fb:like href="" send="false" layout="button_count" show_faces="false"></fb:like>
			</div>
		</div>
	</div>
  
	<div class="button3d button3d--sot" href="">
		<div class="button3d__face button3d__face--front button3d__face--front--sot">
			<i class="fa fa-twitter"></i>Share on twitter
		</div>
		<div class="button3d__face button3d__face--bottom button3d__face--bottom--sot">
			<div class="social-button">
				<a href="https://twitter.com/share" class="twitter-share-button" data-text="" data-url="" data-hashtags="" data-lang="en">Tweet</a>
			</div>
		</div>
	</div>
  
	<div class="button3d button3d--sogt" href="">
		<div class="button3d__face button3d__face--front button3d__face--front--sog">
			<i class="fa fa-google-plus"></i>Share on Google+
		</div>
		<div class="button3d__face button3d__face--bottom button3d__face--bottom--sog">
			<div class="social-button">
				<div class="g-plusone" data-size="medium"></div>
			</div>
		</div>
	</div>
</div>
  
<!-- Facebook JavaScript SDK -->
<div id="fb-root"></div>
<script type="text/javascript">
    window.fbAsyncInit = function() {
        FB.init({
            appId: 'XXXXXXXX',
            xfbml: true,
            status: true,
            cookie: true,
            version: 'v2.0'
        });
        FB.Event.subscribe('edge.create', function(targetUrl) {
            ga('send', 'social', 'facebook', 'like', targetUrl);
        });
        FB.Event.subscribe('edge.remove', function(targetUrl) {
            ga('send', 'social', 'facebook', 'unlike', targetUrl);
        });
        FB.Event.subscribe('message.send', function(targetUrl) {
            ga('send', 'social', 'facebook', 'send', targetUrl);
        });
    };
    (function(d, s, id){
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = '//connect.facebook.net/ja_JP/sdk.js';
        js.async = true;
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

<!-- Twitter Widgets -->
<script>
    window.twttr = (function(d, s, id) {
        var t, js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s);
        js.id = id;
        js.src = 'https://platform.twitter.com/widgets.js';
        fjs.parentNode.insertBefore(js, fjs);
        return window.twttr || (t = {
            _e: [],
            ready: function(f) {
                t._e.push(f)
            }
        })
    }(document, 'script', 'twitter-wjs'));
    twttr.ready(function(twttr) {
        twttr.events.bind('click', function(e) {
            ga('send', 'social', 'twitter', 'click', window.location.href);
        });
        twttr.events.bind('tweet', function(e) {
            ga('send', 'social', 'twitter', 'tweet', window.location.href);
        });
    });
</script>

<!-- Google+ -->
<script type="text/javascript">
    window.___gcfg = {lang: 'ja'};
    (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/platform.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();
</script>

@import "compass";

body {
	font-family: 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	-moz-osx-font-smoothing:grayscale;
	-webkit-font-smoothing:antialiased;
}

.button3d-container {
	width: 88%;
	max-width: 864px;
	position: absolute;
	top: 50%;
	left: 50%;
	@include translate(-50%, -50%);
	@include perspective(1000000px);
}

.button3d {
	display: block;
	float: left;
	width: 25%;
	height: 48px;
	margin: 0;
	font-size: 11px;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
    @include transition-property(transform);
    @include transition-duration(.26s);
    @include transition-timing-function(ease);
    @include backface-visibility(hidden);
	@include transform-style(preserve-3d);
}

@media screen and (max-width: 768px) {
	.button3d {
		width: 50%;
	}
}

@media screen and (max-width: 500px) {
	.button3d {
		width: 100%;
	}
}

.button3d:hover {
	@include rotateX(90deg);
}

.button3d__face {
	display: block;
	height: 100%;
	font-weight: 500;
}

.button3d__face--front {
	line-height: 48px;
	@include translateZ(24px);
}

.button3d__face--bottom {
	@include transform(rotateX(-90deg) translateZ(-24px));
}

.fa {
	margin-right: 6px;
}

.fa-external-link {
	margin-left: 6px;
	margin-right: 0;
}

.social-button {
	display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    @include translate(-50%, -50%);
	text-align: center;
    font-size: 0;
}

.button3d__face--front--ltw {
	background-color: #3753ff;
}

.button3d__face--bottom--ltw {
	line-height: 48px;
	background-color: darken(#3753ff, 8%);
}

.button3d__face--front--sof {
	background-color: #3b5998;
}

.button3d__face--bottom--sof {
	background-color: darken(#3b5998, 8%);
}

.button3d__face--front--sot {
	background-color: #55acee;
}

.button3d__face--bottom--sot {
	background-color: darken(#55acee, 8%);
}

.button3d__face--front--sog {
	background-color: #dc4e41;
}

.button3d__face--bottom--sog {
	background-color: darken(#dc4e41, 8%);
}