Ajax Loader
HTML 
<h1 class="title">CSS Social Ribbons</h1>
1
<h1 class="title">CSS Social Ribbons</h1>
2
<div class="container">
3
  <button class="ribbon facebook">
4
    <span class="entypo-facebook"></span>
5
  </button>
6
  <button class="ribbon googleplus">
7
    <span class="entypo-gplus"></span>
8
  </button>
9
  <button class="ribbon twitter">
10
    <span class="entypo-twitter"></span>
11
  </button>
12
</div>
13
<div id="author">by: Skyler Knight</div>
 
CSS 
@import url(http://fonts.googleapis.com/css?family=Allura);
1
@import url(http://fonts.googleapis.com/css?family=Allura);
2
@import url(http://weloveiconfonts.com/api/?family=entypo);
3
 
4
/* entypo */
5
[class*="entypo-"]:before {
6
  font-family: 'entypo', sans-serif;
7
}
8
 
9
body{
10
margin: 0;
11
padding: 1em;
12
background-image: url(http://subtlepatterns.com/patterns/type.png); background-position: initial initial; background-repeat: initial initial;
13
}
14
.title{
15
  font-family: 'Allura', cursive;
16
  font-weight: 400;
17
  color: #999;
18
  font-size: 4em;
19
  text-align: center;
20
  margin: 0;
21
  padding: 0.8em 0;
22
  @include text-shadow(0px 0px 5px black);
23
}
24
.container{
25
  padding:0;
26
  margin: 0 auto;
27
  width: 410px;
28
 }
29
.ribbon{
30
  float: left;
31
  @include appearance(none);
32
  @include border-radius(5px 5px 0px 0px);
33
  @include transition(all 0.2s ease);
34
  cursor: pointer;
35
  border: none;
36
  background: blue;
37
  width: 150px;
38
  height: 250px;
39
  position: relative;
40
  color: white;
41
  padding: 5px;
42
  margin-right: -20px;
43
  -webkit-filter: drop-shadow(0 1px 10px rgba(0,0,0,.5));
44
    -moz-filter: drop-shadow(0 1px 10px rgba(0,0,0,.5));
45
    -ms-filter: drop-shadow(0 1px 10px rgba(0,0,0,.5));
46
    -o-filter: drop-shadow(0 1px 10px rgba(0,0,0,.5));
47
    filter: drop-shadow(0 1px 10px rgba(0,0,0,.5));
48
&:hover{
49
  margin-top: 20px;
50
  color:white;
51
}
52
span{
53
line-height: 20px;
54
font-size: 5em;
55
  }
56
&::before{
57
    content: '';
58
    position: absolute;
59
    top: 100%;
60
    left: 0;
61
    width: 0;
62
    height: 0;
63
    border-top: 50px solid blue;
64
    border-right: 100px solid transparent;
65
 }
66
&::after{
67
    content: '';
68
    position: absolute;
69
    top: 100%;
70
    right: 0;
71
    width: 0;
72
    height: 0;
73
    border-top: 50px solid blue;
74
    border-left: 100px solid transparent;
75
 }
76
}
77
.facebook{
78
  margin-top: 10px;
79
  background: #3b5998;
80
  color: darken(#3b5998, 20%);
81
  &::after{border-top-color: #3b5998}
82
  &::before{border-top-color: #3b5998}
83
  }
84
.googleplus{
85
  z-index: 999;
86
  background:#c4302b;
87
  color: darken(#c4302b, 20%);
88
  &::after{border-top-color: #c4302b}
89
  &::before{border-top-color: #c4302b}
90
  }
91
.twitter{
92
  margin-top: 10px;
93
  background: #00a0d1;
94
  color: darken(#00a0d1, 20%);
95
  &::after{border-top-color: #00a0d1}
96
  &::before{border-top-color: #00a0d1}
97
  }
98
#author{
99
  font-family: 'Allura', cursive;
100
  position: absolute;
101
  bottom: 25px;
102
  right: 40px;
103
  color: #999;
104
  font-size: 2em;
105
106
  }
 

CSS Social Ribbons

CSSDeck G+