Ajax Loader
×

Social Buttons Count

Simple social buttons with hit counts. Works with :After, Background Gradient and some Shadows

HTML 
<a href="http://www.dhenriquez.cl/?p=421" data-contador="100" class="facebook"><span>Facebook</span></a><br>
1
<a href="http://www.dhenriquez.cl/?p=421" data-contador="100" class="facebook"><span>Facebook</span></a><br>
2
<a href="http://www.dhenriquez.cl/?p=421" data-contador="1k" class="twitter"><span>Twitter</span></a><br>
3
<a href="http://www.dhenriquez.cl/?p=421" data-contador="1" class="google"><span>Google +</span></a>
 
CSS 
/*
1
/*
2
Daniel Henriquez
3
@dhenriquez
4
http://www.dhenriquez.cl
5
*/
6
a{
7
  width:120px;
8
  height:auto;
9
10
  font-family:Verdana, Geneva, sans-serif;
11
  font-size:10px;
12
  text-decoration:none;
13
  text-transform:uppercase;
14
  text-shadow:0 1px #000;
15
16
  display:block;
17
  color:#FFF;
18
  border-radius:5px;
19
  border:#000 1px solid;
20
  overflow:hidden;
21
  font-weight:bold;
22
23
  margin-left:auto;
24
  margin-right:auto;
25
 
26
}
27
a span{
28
  width:auto;
29
  height:auto;
30
  display:block;
31
  padding:5px;
32
  float:left;
33
}
34
a:after{
35
  content:attr(data-contador);
36
  width:auto;
37
  height:auto;
38
  padding:5px;
39
  background:#FFF;
40
  font-size:10px;
41
  border-radius:5px;
42
  color:#000;
43
  float:right;
44
  text-shadow:none;
45
  text-align:center;
46
}
47
.facebook{
48
  border:#03C 1px solid;
49
  background-image: linear-gradient(bottom, #235CA3 50%, #7BA5FA 100%);
50
  background-image: -o-linear-gradient(bottom, #235CA3 50%, #7BA5FA 100%);
51
  background-image: -moz-linear-gradient(bottom, #235CA3 50%, #7BA5FA 100%);
52
  background-image: -webkit-linear-gradient(bottom, #235CA3 50%, #7BA5FA 100%);
53
  background-image: -ms-linear-gradient(bottom, #235CA3 50%, #7BA5FA 100%);
54
55
  background-image: -webkit-gradient(
56
    linear,
57
    left bottom,
58
    left top,
59
    color-stop(0.5, #235CA3),
60
    color-stop(1, #7BA5FA)
61
  );
62
}
63
.twitter{
64
  border:#09F 1px solid;
65
  background-image: linear-gradient(bottom, #1897BD 50%, #67D9F5 100%);
66
  background-image: -o-linear-gradient(bottom, #1897BD 50%, #67D9F5 100%);
67
  background-image: -moz-linear-gradient(bottom, #1897BD 50%, #67D9F5 100%);
68
  background-image: -webkit-linear-gradient(bottom, #1897BD 50%, #67D9F5 100%);
69
  background-image: -ms-linear-gradient(bottom, #1897BD 50%, #67D9F5 100%);
70
71
  background-image: -webkit-gradient(
72
    linear,
73
    left bottom,
74
    left top,
75
    color-stop(0.5, #1897BD),
76
    color-stop(1, #67D9F5)
77
  );
78
}
79
.google{
80
  border:#900 1px solid;
81
  background-image: linear-gradient(bottom, #BD1818 50%, #F56565 100%);
82
  background-image: -o-linear-gradient(bottom, #BD1818 50%, #F56565 100%);
83
  background-image: -moz-linear-gradient(bottom, #BD1818 50%, #F56565 100%);
84
  background-image: -webkit-linear-gradient(bottom, #BD1818 50%, #F56565 100%);
85
  background-image: -ms-linear-gradient(bottom, #BD1818 50%, #F56565 100%);
86
87
  background-image: -webkit-gradient(
88
    linear,
89
    left bottom,
90
    left top,
91
    color-stop(0.5, #BD1818),
92
    color-stop(1, #F56565)
93
  );
94
}
 

Social Buttons Count

CSSDeck G+