CSS3 implementation of the Player play button

The finished effect is as follows

View effects and download

Step 1: First understand the principle of border:

Step 2:html Code structure

HTML code  

2. < section class="Playcontainer">
4. <li class="playbtn">
6. <a href="#" title="Start">start</a>
8. </li>
10. <li class="pausebtn">
12. <a href="#" title="Pause">pause</a>
14. </li>
16. <li class="stopbtn">
18. <a href="#" title="Stop">stop</a>
20. </li>
22. <li class="forwardbtn playbtn">
24. <a href="#" title="forward">forward</a>
26. <a href="#" title="forward">forward</a>
28. </li>
30. <li class="rewindbtn">
32. <a href="#" title="Rewind">rewind</a>
34. <a href="#" title="Rewind">rewind</a>
36. </li>
38. <li class="ejectbtn">
40. <a href="#" class="Arrow">eject</a>
42. <a href="#" class="Dash">eject</a>
44. </li>
46. </Section>

Step 3: Draw Background circle, position:relative

CSS Code  

1. . playcontainer li {position:relative; float:left; border:25px solid #404040; color: #404040; height: 0; wi DTH:0;-webkit-border-radius: 100%;-moz-border-radius: 100%;-o-border-radius: 100%; Border-radius:  100%; margin: 0 20px;}

Step 4: Draw the Stop button to center the button.

The button is absolutely positioned relative to the outer circle, starting at the center of the circle, so adjust the top and left values

The Stop button has a length of 14px, and the relative origin needs to move up and to the left by 7 pixels, centered.

The full CSS is as follows:

CSS Code  

2. . playcontainer {position:relative; float:left; Background:rgba (0, 0, 0, 0.8); padding:20px;}
4. . playcontainer li {position:relative; float:left; border:25px solid #404040; color: #404040; height: 0; wi DTH:0;-webkit-border-radius: 100%;-moz-border-radius: 100%;-o-border-radius: 100%; Border-radius:  100%; margin: 0 20px;}
6. . playcontainer a {border-style:solid; Text-indent: -9999px; position:absolute; top: -8px; left: -3px; }
10. . playbtn a {border-color:transparent transparent transparent #fff; border-width:8px 0 8px 12px;  Width: 0; height: 0;}
12. . pausebtn a {border-color:transparent white;  Border-width: 0 6px; height:15px; width:6px; left: -9px;}
14. . stopbtn a {border:7px solid #fff; height: 0; width: 0; Left: -7px; top: -7px;}
16. . forwardbtn a {border-left-width:8px; left:1px;}
18. . forwardbtn A:first-child {margin-left: -7px; }
22. . rewindbtn a {border-width:8px 8px 8px 0; border-color:transparent #fff transparent transparent; width: 0; Heig  HT: 0;}
24. . rewindbtn A:first-child {margin-left: -7px;}
28. . ejectbtn A.arrow {border-width: 0 8px 8px 8px; border-color:transparent transparent #fff transparent; top:-26px; le ft:-8px; }  
30. Ectbtn A.dash {border-width: 0 0 4px; border-color:transparent transparent #fff; height: 0; width:16px; left : -8px; top:4px; }
    

CSS3 implementation of the Player play button