Blog Posted July 16, 2011

CSS3: An All-CSS, Image-less Play Button

Example

The HTML

1
2
3
4
5
6
7
<a class="thumb" href="/some-url">
  <img src="some-image.jpg" alt="Image" />
  <b class="play">
    <i class="wave"></i>
    <i class="arrow">Play now</i>
  </b>
</a>

The CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
/* the anchor tag containing everything */
a.thumb {
  position:relative;
  width:300px;
  height:225px;
  display:block;
}

/* the black box */
b.play {
  display:block;
  position:absolute;
  width:80px;
  height:75px;
  bottom:0;
  right:0;
  background:#1a1a1a;
  text-indent:-5000px;
  overflow:hidden;
}

/* the arrow's container */
i.arrow {
  display: block;
  width: 40px;
  height: 45px;
  overflow:hidden;
  position:relative;
  margin:-30px 0 0 25px;
}

/* the arrow */
i.arrow:after {
  content:'';
  display:block;
  background:#fff;
  width:60px;
  height:65px;
  -moz-transform:
    rotate(-60deg)
    skewY(30deg);
  -webkit-transform:
    rotate(-60deg)
    skewY(30deg);
  -o-transform:
    rotate(-60deg)
    skewY(30deg);
  -ms-transform:
    rotate(-60deg)
    skewY(30deg);
  transform:
    rotate(-60deg)
    skewY(30deg);
  position:absolute;
  left:-52px;
  top:-10px;
}

/* the gradiated and curved background behind the arrow */
i.wave {
  content:'';
  display:block;
  background:-moz-linear-gradient(center top, #000000, #272727 83%, #3D3D3D 100%) repeat scroll 0 0 transparent;
  background-image:-ms-linear-gradient(center top, #000000, #272727 83%, #3D3D3D 100%) repeat scroll 0 0 transparent;
  background:-webkit-gradient(linear, center top, center bottom, from(#000), color-stop(83%, #272727), color-stop(100%, #3d3d3d));
  border-radius:80px;
  display:block;
  height:160px;
  margin-left:-45px;
  margin-top:-110px;
  width:170px;
}