html Soundcloud风格的“播放”按钮

Posted 2021-05-11

<!--SoundCloud Style "Play" Button-->
<button class="sc-button-play sc-button sc-button-xlarge" tabindex="0" title="Play">Play</button>

<!--CSS: Rounded Button-->
<style>
.sc-button-play }
background-color: #f50;
border-radius: 50%;
}

<!--CSS: Arrow-->
.sc-button-xlarge.sc-button-play:before {
  background-size: undefinedpx undefinedpx;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDggMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHRpdGxlPlBsYXkgMjg8L3RpdGxlPjxwYXRoIGQ9Ik0wIDE0bDEuODQ2LTdMMCAwbDggNy04IDd6IiBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=);
  background-size: 12px 18px
}
</style>