forked from vsxed/Social-Slides
-
Notifications
You must be signed in to change notification settings - Fork 0
/
social-slide.css
19 lines (17 loc) · 3.69 KB
/
social-slide.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
body{padding:3em 2em;font-family: 'Ubuntu', sans-serif;font-size:1em;line-height:1;background:#333333;color:#fff;text-align: center;}
.credit{display:block;max-width:400px;text-align:center;padding:0;font-size:0.8em;color:#888888;text-shadow:0 1px 0 rgba(0, 0, 0, 0.9);}.credit p a,.credit a{color:white;text-decoration:none;font-weight:700;}.credit p a:hover,.credit a:hover,.credit p a:active,.credit a:active{text-shadow:0 0 5px rgba(255, 255, 255, 0.4);color:white;}
.credit p a.button,.credit a.button{padding:6px 12px;margin-top:10px;background:#1a1a1a;border-radius:3px;}.credit p a.button:hover,.credit a.button:hover{background:#4d4d4d;}
.credit p:last-of-type{margin-bottom:30px;}
section{max-width:175px;margin:0 auto;display:block;padding:2em;width:100%;}
logo{font-size: 4em;}
#container{width:50%;margin:0 auto;}
span{position:absolute;top:7px;left:16px;text-align:center;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;display:block;}span.fb-inner{background:no-repeat url('sprite.png') -41px 0;width:40px;height:40px;}
span.tw-inner{background:no-repeat url('sprite.png') 0 0;width:40px;height:40px;}
.social-share{width:72px;height:54px;display:inline-block;position:relative;overflow:hidden;border-radius:6px;}.social-share:first-of-type{margin-right:10px;}
.social-share.fb{background:-webkit-gradient(radial, 37 56, 25, 36 190, 144, from(rgba(51, 88, 144, 0.99)), to(rgba(51, 88, 144, 0.99))),-webkit-gradient(radial, -10 72, 10, 310 -72, 72, from(rgba(54, 93, 152, 0.99)), to(rgba(54, 93, 152, 0.99))),-webkit-gradient(radial, 72 72, 20, -275 -72, 72, from(rgba(54, 93, 152, 0.99)), to(rgba(54, 93, 152, 0.99))) rgba(61, 105, 171, 0.99) !important;background:no-repeat url('sprite.png') 0 -47px;}
.social-share.tw{background:-webkit-gradient(radial, 37 56, 25, 36 190, 144, from(rgba(56, 168, 186, 0.99)), to(rgba(56, 168, 186, 0.99))),-webkit-gradient(radial, -10 72, 10, 310 -72, 72, from(rgba(58, 175, 194, 0.99)), to(rgba(58, 175, 194, 0.99))),-webkit-gradient(radial, 72 72, 20, -275 -72, 72, from(rgba(58, 175, 194, 0.99)), to(rgba(58, 175, 194, 0.99))) rgba(76, 184, 201, 0.99) !important;background:no-repeat url('sprite.png') -73px -47px;}
.social-share:hover>span{top:-29px;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
.social-share:hover>.cta{bottom:0;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
.cta{text-decoration:none;font-size:14px;font-weight:bold;padding:6px 0;text-align:center;width:72px;position:absolute;border-radius:0 0 6px 6px;bottom:-60px;display:block;box-shadow:inset 0 1px 0 0 #ffffff,0 -1px 0 0 rgba(0, 0, 0, 0.3);background-color:#e8e8e8;background-image:-webkit-linear-gradient(top left, #e8e8e8, #ffffff);background-image:-moz-linear-gradient(top left, #e8e8e8, #ffffff);background-image:-ms-linear-gradient(top left, #e8e8e8, #ffffff);background-image:-o-linear-gradient(top left, #e8e8e8, #ffffff);background-image:linear-gradient(top left, #e8e8e8, #ffffff);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8e8e8', endColorstr='#ffffff', GradientType=0);;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}.cta.tw{color:rgba(58, 175, 194, 0.99);}
.cta.fb{color:rgba(54, 93, 152, 0.99);}