Player play button implemented by CSS3_html/css_WEB-ITnose

The completed effect is as follows

View the effect and download

Step 1: First understand the principle of border:

Step 2: HTML code structure

Html code

4. Start
8. Pause
12. Stop
16. Forward
20. rewind">Rewind
21. Rewind
25. Eject
26. Eject

Step 3: Draw a background circle, position: relative

Css code

Step 4: Draw the stop button and make the button centered.

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

The stop button side length is 14px , it needs to be moved 7 pixels up and to the left relative to the origin, centered.

All CSS is as follows:

Css code

1.    .playContainer { position: relative; float: left; background: rgba(0, 0, 0, 0.8); padding: 20px; }  
2. .playContainer li { position: relative; float: left; border: 25px solid #404040; color: #404040; height: 0; width:0; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; margin: 0 20px; }  
3. .playContainer a { border-style: solid; text-indent: -9999px; position: absolute; top: -8px; left: -3px;  }  
4.   
5. .playBtn a { border-color: transparent transparent transparent #fff; border-width: 8px 0 8px 12px;  width: 0; height: 0; }  
6. .pauseBtn a { border-color: transparent white;  border-width: 0 6px; height: 15px; width: 6px; left: -9px; }  
7. .stopBtn a { border: 7px solid #fff; height: 0; width: 0; left: -7px; top: -7px;}  
8. .forwardBtn a { border-left-width: 8px; left: 1px; }  
9. .forwardBtn a:first-child { margin-left: -7px;  }  
10.   
11. .rewindBtn a { border-width: 8px 8px 8px 0; border-color: transparent #fff transparent transparent; width: 0; height: 0; }  
12. .rewindBtn a:first-child { margin-left: -7px; }  
13.   
14. .ejectBtn a.arrow { border-width: 0 8px 8px 8px; border-color: transparent transparent #fff transparent; top:-26px; left:-8px; }  
15. ectBtn a.dash { border-width: 0 0 4px; border-color: transparent transparent #fff; height: 0; width:16px; left: -8px; top: 4px; }