用CSS实现播放、暂停、停止、上一首、下一首按钮

html

 <section class="playContainer">
    <li class="playBtn">
      <a href="#" title="start">Start</a>
    </li>
    <li class="pauseBtn">
      <a href="#" title="pause">Pause</a>
    </li>
    <li class="stopBtn">
      <a href="#" title="stop">Stop</a>
    </li>
    <li class="forwardBtn playBtn">
      <a href="#" title="forward">Forward</a>
      <a href="#" title="forward">Forward</a>
    </li>
    <li class="rewindBtn">
      <a href="#" title="rewind">Rewind</a>
      <a href="#" title="rewind">Rewind</a>
    </li>
    <li class="ejectBtn">
      <a href="#" class="arrow">Eject</a>
      <a href="#" class="dash">Eject</a>
    </li>
  </section>

css

<style>
  .playContainer li {
    position: relative;
    display: block;
    float: left;
    border: 25px solid #fff;
    color: #fff;
    height: 0;
    width: 0;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
    margin: 0 20px;
  }

  .playContainer a {
    border-style: solid;
    text-indent: -9999px;
    position: absolute;
    top: -8px;
    left: -3px;
  }

  .playBtn a {
    border-color: transparent transparent transparent #23a8f2;
    border-width: 8px 0 8px 12px;
    width: 0;
    height: 0;
  }

  .pauseBtn a {
    border-color: transparent #23a8f2;
    border-width: 0 6px;
    height: 15px;
    width: 6px;
    left: -9px;
  }

  .stopBtn a {
    border: 7px solid #23a8f2;
    height: 0;
    width: 0;
    left: -7px;
    top: -7px;
  }

  .forwardBtn a {
    border-left-width: 8px;
    left: 1px;
  }

  .forwardBtn a:first-child {
    margin-left: -7px;
  }

  .rewindBtn a {
    border-width: 8px 8px 8px 0;
    border-color: transparent #23a8f2 transparent transparent;
    width: 0;
    height: 0;
  }

  .rewindBtn a:first-child {
    margin-left: -7px;
  }

  .ejectBtn a.arrow {
    border-width: 0 8px 8px 8px;
    border-color: transparent transparent #23a8f2 transparent;
    top: -26px;
    left: -8px;
  }

  .ejectBtn a.dash {
    border-width: 0 0 4px;
    border-color: transparent transparent #23a8f2;
    height: 0;
    width: 16px;
    left: -8px;
    top: 4px;
  }
</style>

 效果图