3D CSS FACEBOOK BUTTONS CATEGORIE DCDECK

• ↓
• HTML
• CSS

HTML

1

<section id="btn">

2

  <p>47k fans</p>

3

  <div id="facebook">

4

    <div class="logo"><div class="recto"></div></div>

5

    <div class="top"></div>

6

    <div class="logo verso"></div>

7

  </div>

8

  <div id="shadow"><img src="http://www.cssdeck.com/uploads/media/items/9/98AayKh.png" alt="shadow" /></div>

9

</section>

CSS

1

* {margin: 0; padding: 0;}

2

3

body {

4

  background:#e9edee;

5

}

6

7

#btn {

8

  width:103px;

9

  height: 35px;

10

  position: absolute;

11

  top: 50%;

12

  left: 50%;

13

  margin: -17px 0 0 -51px;

14

15

  background-color: #d6dbde;

16

  background: #d6dbde -webkit-linear-gradient(bottom, rgb(215,219,222) 0, rgb(216,220,221) 60%, rgb(193,199,202) 100%);

17

  -webkit-box-shadow: inset 0px 0px 5px rgba(0,0,0,.2), 0px 1px 1px rgba(0,0,0,.5);

18

19

  background: #d6dbde -moz-linear-gradient(bottom, rgb(215,219,222) 0, rgb(216,220,221) 60%, rgb(193,199,202) 100%);

20

  -moz-box-shadow: inset 0px 0px 5px rgba(0,0,0,.2), 0px 1px 1px rgba(0,0,0,.5);

21

22

  text-align: center;

23

  border-radius: 2px;

24

  line-height: 35px;

25

  color: #4a66a7;

26

  font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;

27

  font-size: .8em;

28

  font-weight: bold;

29

30

  -webkit-perspective: 200;

31

  -webkit-perspective-origin: 50% 0;

32

33

  -moz-perspective: 200;

34

  -moz-perspective-origin: 50% 0;

35

}

36

37

#facebook {

38

  width: 103px;

39

  height: 35px;

40

  text-indent: -9999px;