14+ CSS Play/Pause Button Examples

This post contains a total of 14+ Hand-Picked CSS Play/Pause Button Examples with Source Code. All the Play/Pause Buttons are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

Click a Code to Copy it.

1. By Andreas Antonsson

Made by Andreas Antonsson. Simple CSS Play button with Hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,400i,900);
@-webkit-keyframes scaleIn {
  to {
    transform: scale(1);
  }
}
@keyframes scaleIn {
  to {
    transform: scale(1);
  }
}
@-webkit-keyframes slideIn {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideIn {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
html, body {
  height: 100%;
}

body {
  background: #0274FA;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Roboto", sans-serif;
}

.play-toggle {
  position: relative;
  cursor: pointer;
}
.play-toggle .play-circle, .play-toggle .play-circle:before, .play-toggle .play-circle:after, .play-toggle span {
  display: inline-block;
  vertical-align: middle;
}
.play-toggle span {
  color: white;
  margin-left: 1rem;
  font-size: 1.2rem;
  transition: transform 350ms ease;
}
.play-toggle span i, .play-toggle span strong {
  display: inline-block;
  opacity: 0;
  transform: translate3d(-1rem, 0, 0);
  -webkit-animation: slideIn 400ms ease forwards;
          animation: slideIn 400ms ease forwards;
}
.play-toggle span i {
  color: rgba(255, 255, 255, 0.7);
  -webkit-animation-delay: 700ms;
          animation-delay: 700ms;
}
.play-toggle span strong {
  font-size: 1.25em;
  font-weight: 900;
  letter-spacing: 1px;
  -webkit-animation-delay: 750ms;
          animation-delay: 750ms;
}
.play-toggle .play-circle, .play-toggle .play-circle:before, .play-toggle .play-circle:after {
  position: relative;
  height: 4rem;
  width: 4rem;
  background: white;
  border-radius: 50%;
  transform: scale(0);
  -webkit-animation: scaleIn 500ms cubic-bezier(0.075, 0.82, 0.165, 1) 500ms forwards;
          animation: scaleIn 500ms cubic-bezier(0.075, 0.82, 0.165, 1) 500ms forwards;
}
.play-toggle .play-circle:before, .play-toggle .play-circle:after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  opacity: 0.04;
}
.play-toggle .play-circle:before {
  height: 8rem;
  width: 8rem;
  margin-left: -4rem;
  margin-top: -4rem;
}
.play-toggle .play-circle:after {
  height: 12rem;
  width: 12rem;
  margin-left: -6rem;
  margin-top: -6rem;
}
.play-toggle .play-icon {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: white;
  border-radius: 50%;
  box-shadow: 0 3px 24px rgba(0, 0, 0, 0.3);
  transition: transform 350ms ease;
}
.play-toggle .play-icon:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-35%, -50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-left: 15px solid #0274FA;
  border-bottom: 10px solid transparent;
}
.play-toggle:hover .play-icon {
  transform: scale(1.1);
}
.play-toggle:hover span {
  transform: translateX(0.3rem);
}
</style>
</head>
<body>
  <div class="play-toggle">
  <div class="play-circle">
    <i class="play-icon"></i>
  </div>
  <span class="">
    <i>Watch our</i><br>
    <strong>Showreel</strong>
  </span>
</div>
</body>
</html>

2. By J Scott Smith

Made by J Scott Smith. Play button with Loading animation on hover. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
@-webkit-keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.stroke-dotted {
  opacity: 0;
  stroke-dasharray: 4,5;
  stroke-width: 1px;
  transform-origin: 50% 50%;
  -webkit-animation: spin 4s infinite linear;
          animation: spin 4s infinite linear;
  transition: opacity 1s ease,  stroke-width 1s ease;
}

.stroke-solid {
  stroke-dashoffset: 0;
  stroke-dashArray: 300;
  stroke-width: 4px;
  transition: stroke-dashoffset 1s ease,  opacity 1s ease;
}

.icon {
  transform-origin: 50% 50%;
  transition: transform 200ms ease-out;
}

#play:hover .stroke-dotted {
  stroke-width: 4px;
  opacity: 1;
}
#play:hover .stroke-solid {
  opacity: 0;
  stroke-dashoffset: 300;
}
#play:hover .icon {
  transform: scale(1.05);
}

html {
  height: 100%;
}

body {
  height: 100%;
  background-color: #30FF98;
  background: radial-gradient(#71edb5, #30ff98);
}

#play {
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
</style>
</head>
<body>
  <svg version="1.1" id="play" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="100px" width="100px"
	 viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
  <path class="stroke-solid" fill="none" stroke="white"  d="M49.9,2.5C23.6,2.8,2.1,24.4,2.5,50.4C2.9,76.5,24.7,98,50.3,97.5c26.4-0.6,47.4-21.8,47.2-47.7
    C97.3,23.7,75.7,2.3,49.9,2.5"/>
  <path class="stroke-dotted" fill="none" stroke="white"  d="M49.9,2.5C23.6,2.8,2.1,24.4,2.5,50.4C2.9,76.5,24.7,98,50.3,97.5c26.4-0.6,47.4-21.8,47.2-47.7
    C97.3,23.7,75.7,2.3,49.9,2.5"/>
  <path class="icon" fill="white" d="M38,69c-1,0.5-1.8,0-1.8-1.1V32.1c0-1.1,0.8-1.6,1.8-1.1l34,18c1,0.5,1,1.4,0,1.9L38,69z"/>
</svg>
</body>
</html>

3. By Shitsu

Made by Shitsu. Simple CSS Play/Pause button. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
/* Variables
   ================================ */
/* Base
   ================================ */
*, *:before, *:after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  background: #eff6d3;
  background-image: linear-gradient(-90deg, #255F3A, #26255F);
}

/* Main
   ================================ */
.box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 80px;
  height: 80px;
  margin: auto;
}

.play-button {
  display: block;
  position: relative;
  width: 80px;
  height: 80px;
  margin: auto;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.play-button input[type=checkbox] {
  display: none;
}
.play-button input[type=checkbox]:checked ~ span::before, .play-button input[type=checkbox]:checked ~ span::after {
  border: 20px solid transparent;
  border-left: 40px solid #fff;
  border-right: 0;
}
.play-button input[type=checkbox]:checked ~ span::after {
  transform: translateY(-50%) scaleY(0.5);
}
.play-button span {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 40px;
  height: 40px;
}
.play-button span::before, .play-button span::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
  border: 0 solid transparent;
  border-left: 16px solid #fff;
  transition: all 0.4s ease;
}
.play-button span::before {
  left: 0;
}
.play-button span::after {
  right: 0;
}
</style>
</head>
<body>
  <div class="box">
  <label class="play-button"><input type="checkbox"><span></span></label>
</div>
</body>
</html>

4. By Arturo Alviar

Made by Arturo Alviar. CSS Play button with Ripple animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
body {
  background: linear-gradient(to right, #f857a6, #ff5858);
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
}
.button {
  display: inline-block;
  position: relative;
}
.button.is-play {
  background-color: #fff;
  border-radius: 50%;
  width: 100px;
  height: 100px;
}
.button.is-play .button-outer-circle {
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
}
.button.is-play .button-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
}
.button.is-play .button-icon .triangle {
  -webkit-animation: fadeIn 7s ease;
          animation: fadeIn 7s ease;
}
.button.is-play .button-icon .path {
  stroke-dasharray: 90;
  stroke-dashoffset: 0;
  -webkit-animation: triangleStroke 3s;
          animation: triangleStroke 3s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
}
.has-scale-animation {
  -webkit-animation: smallScale 3s infinite;
          animation: smallScale 3s infinite;
}
.has-delay-short {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes triangleStroke {
  from {
    stroke-dashoffset: 90;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes triangleStroke {
  from {
    stroke-dashoffset: 90;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes smallScale {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(1.5);
    opacity: 0;
  }
}
@keyframes smallScale {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(1.5);
    opacity: 0;
  }
}
</style>
</head>
<body>
  <div class="container"><a class="button is-play" href="#">
    <div class="button-outer-circle has-scale-animation"></div>
    <div class="button-outer-circle has-scale-animation has-delay-short"></div>
    <div class="button-icon is-play">
      <svg height="100%" width="100%" fill="#f857a6">
        <polygon class="triangle" points="5,0 30,15 5,30" viewBox="0 0 30 15"></polygon>
        <path class="path" d="M5,0 L30,15 L5,30z" fill="none" stroke="#f857a6" stroke-width="1"></path>
      </svg>
    </div></a></div>
</body>
</html>

5. By ZhangZhuo

Made by ZhangZhuo. Play/Pause button with Hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
html, body {
    height: 100%;
  }
  body {
    background: #009688;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #play-button-container {
    display: inline-block;
    width: 50px;
    height: 50px;
    cursor: pointer;
  }
 .play-button {
    display: inline-block;
    position: absolute;
    width: 50px;
    height: 50px;
    background: #fff;
    transition: -webkit-clip-path .3s ease;
    transition: clip-path .3s ease;
    transition: clip-path .3s ease, -webkit-clip-path .3s ease;
  }
  .play-button-before {
    -webkit-clip-path: polygon(0 0, 50% 25%, 50% 75%, 0% 100%);
            clip-path: polygon(0 0, 50% 25%, 50% 75%, 0% 100%);
  }
  .play-button-after {
    -webkit-clip-path: polygon(50% 25%, 100% 50%, 100% 50%, 50% 75%);
            clip-path: polygon(50% 25%, 100% 50%, 100% 50%, 50% 75%);
  }
  #play-button-container:hover .play-button-before {
    -webkit-clip-path: polygon(0 0, 30% 0, 30% 100%, 0% 100%);
            clip-path: polygon(0 0, 30% 0, 30% 100%, 0% 100%);
  }
  #play-button-container:hover .play-button-after{
    -webkit-clip-path: polygon(70% 0, 100% 0, 100% 100%, 70% 100%);
            clip-path: polygon(70% 0, 100% 0, 100% 100%, 70% 100%)
  }
</style>
</head>
<body>
  <span id="play-button-container">
  <span class="play-button play-button-before"></span>
  <span class="play-button play-button-after"></span>
</span>
</body>
</html>

6. By Sven

Made by Sven. Play button with ripple animation and hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
<style>
body {
  background: #e9e9e9;
  padding: 50px;
}

.wrapper {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto;
}
.wrapper .circle {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background-color: #33cc33;
  margin: auto;
  transform: scale(1, 1);
}
.wrapper .circle.pulse {
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation: pulse 2s infinite;
          animation: pulse 2s infinite;
  background-color: #99e699;
}
.wrapper svg {
  fill: #279b27;
  stroke: #279b27;
  stroke-linejoin: round;
  stroke-width: 5;
  transition: all 0.3s;
}
.wrapper svg:hover {
  cursor: pointer;
  fill: #228722;
  stroke: #228722;
  transform: scale(1.2, 1.2);
}

@-webkit-keyframes pulse {
  0% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2, 1.2);
  }
  100% {
    transform: scale(1, 1);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2, 1.2);
  }
  100% {
    transform: scale(1, 1);
  }
}
</style>
</head>
<body>
  <body>
  <div class="wrapper">
    <div class="circle pulse"></div>
    <div class="circle">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <polygon points="40,30 65,50 40,70"></polygon>
      </svg>
    </div>
  </div>
</body>
</body>
</html>

7. By Chris Draycott-Wheatley

Made by Chris Draycott-Wheatley. Simplistic CSS Play button. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
.play-button-outer {
  margin: 25% auto;
  width: 10em;
  height: 10em;
  background-color: rgba(0, 0, 0, .25);
  cursor: pointer;
}

.play-button {
  margin: 0 auto;
  top: 25%;
  position: relative;  
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 2.5em 0 2.5em 5em;
  border-color: transparent transparent transparent #000;
  opacity: .75; 
}

.play-button-outer:hover {
  background-color: rgba(0, 0, 0, .5);
}

.play-button-outer:hover .play-button {
  opacity: 1;
}
</style>
</head>
<body>
  <div class="play-button-outer">
  <div class="play-button"></div>
</div>
</body>
</html>

8. By David Darnes

Made by David Darnes. YouTube Play Pause Button. Source


<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
body {
  background: #111;
  text-align: center;
}

svg {
  margin-top: 45vh;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
</style>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">

    <!-- bar 1 -->
	    <path fill="#D8D8D8" d="M0,0 L6,0 L6,16 L0,16 L0,0 Z" id="bar1">
      <animate xlink:href="#bar1"
               attributeName="d"
               from="M0,0 L6,0 L6,16 L0,16 L0,0 Z"
               	to="M0,0 L6,3.20001221 L6,12.7999878 L0,16 L0,0 Z"
               dur="0.3s"
	               fill="freeze" 
	               begin="startAnimation.begin" />
      <animate xlink:href="#bar1"
               attributeName="d"
               	from="M0,0 L6,3.20001221 L6,12.7999878 L0,16 L0,0 Z"
               to="M0,0 L6,0 L6,16 L0,16 L0,0 Z"
               dur="0.3s"
	               fill="freeze" 
	               begin="reverseAnimation.begin" />
    </path>

    <!-- horizontal line -->
    	<path fill="#D8D8D8" d="M10,0 L16,0 L16,16 L10,16 Z" id="bar2">
      <animate attributeName="d"
	               from="M10,0 L16,0 L16,16 L10,16 Z"
	               to="M5.9944458,3.20001221 L15,8 L15,8 L5.9944458,12.7999878 Z"
               dur="0.3s"
               fill="freeze" 
               begin="startAnimation.begin" />
      <animate attributeName="d"
	               from="M5.9944458,3.20001221 L15,8 L15,8 L5.9944458,12.7999878 Z"
	               to="M10,0 L16,0 L16,16 L10,16 Z"
               dur="0.3s"
               fill="freeze" 
               begin="reverseAnimation.begin" />
    </path>
  
    <!--  controls -->
    <!-- these are on top of the visible icon. Their radius changes depending on which is active
    Opacity is set to 0 so you can't see them-->
    <circle cx="16" cy="16" r="16" fill-opacity="0">
      <animate dur="0.01s" id="startAnimation" attributeName="r" values="16; 0" fill="freeze" begin="click" />
      <animate dur="0.01s" attributeName="r" values="0; 16" fill="freeze" begin="reverseAnimation.end" />
    </circle>
    <circle cx="16" cy="16" r="0" fill-opacity="0">
      <animate dur="0.001s" id="reverseAnimation" attributeName="r" values="16; 0" fill="freeze" begin="click" />
      <animate dur="0.001s" attributeName="r" values="0; 16" begin="startAnimation.end"  fill="freeze"  />
    </circle>
  </svg>
</body>
</html>

9. By Mahtamun Hoque Fahim

Made by Mahtamun Hoque Fahim. Simple CSS Play button with animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
  
<style>
* {
  margin: 0;
  padding: 0;
  outline: 0;
  scroll-behavior: smooth;
  transition: 0.5s ease-in;
}
body {
  background-color: #222;
  display: grid;
  place-content: center;
  height: 100vh;
}
body > div.circle {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background-color: #333;
  display: grid;
  place-content: center;
  animation: grow 1s infinite;
}
body > div.circle > span {
  color: #eee;
  font-size: 50px;
}

@keyframes grow {
  from {
    box-shadow: 0px 0px 1em #000;
  }
  to {
    box-shadow: 0px 0px 3em #000;
  }
}
</style>
</head>
<body>
  <div class="circle">

  <span class="material-icons">
    play_circle
  </span>

</div>
</body>
</html>

10. By Chien-Ju Peng

Made by Chien-Ju Peng. Video play button with loading animation and Click effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
body {
  background-image: url('https://images.unsplash.com/photo-1457369804613-52c61a468e7d?crop=entropy&fit=crop&fm=jpg&h=1275&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1825');
  background-size: cover;
}

.video-play-button {
  display: block;
  width: 104px;
  height: 104px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -52px 0 0 -52px;
  cursor: pointer;
}

.video-play-outline {
  display: block;
  width: 96px;
  height: 96px;
  border: #FFF 4px solid;
  border-radius: 50%;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  opacity: .7;
  transition:all .5s;
}

.video-play-circle {
  stroke-dasharray: 315;
  stroke-dashoffset: 315;
  transition: stroke-dashoffset .5s;
}

.video-play-button svg {
  display: block;
  transform: rotate(-90deg);
  transition: transform .3s;
}

.video-play-button:hover .video-play-circle {
  stroke-dashoffset: 0;
}

.video-play-button:active .video-play-outline {
  transform: scale(1.5);
  opacity: 0;
}

.video-play-button:active svg {
  transform: rotate(-90deg) scale(.95);
}
</style>
</head>
<body>
  <a class="video-play-button">
	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
		 viewBox="0 0 104 104" enable-background="new 0 0 104 104" xml:space="preserve">
	<path fill="none" stroke="#FFFFFF" stroke-width="4" stroke-miterlimit="10" d="M26,35h52L52,81L26,35z"/>
	<circle class="video-play-circle" fill="none" stroke="#DA3D25" stroke-width="4" stroke-miterlimit="10" cx="52" cy="52" r="50"/>
	</svg>
	<span class="video-play-outline"></span>
</a>
</body>
</html>

11. By Weerapat Poosri

Made by Weerapat Poosri. Animated play and pause button. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
 
<style>
@import url(https://fonts.googleapis.com/css?family=Oswald);
body {
  background: #111 url(https://codepen.io/images/classy_fabric.png);
	font-family: "Oswald", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
	font-size: 14px;
	line-height: 1.4;
	color: white;
	text-align: center;
	padding-top: 50px;
}

h1 {
	letter-spacing: 0.5em;
	text-shadow: 1px 1px #000;
}

.btn-play {
	position: relative;
	left: -8px;
	width: 38px;
	height: 38px;
	display: inline-block;
	border: 3px solid #33a303;
	border-radius: 22px;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a8e443), color-stop(100%,#33a303));

	background: -webkit-linear-gradient(top, #a8e443 0%,#33a303 100%);
	background: -moz-linear-gradient(top, #a8e443 0%,#33a303 100%);
	background: -o-linear-gradient(top, #a8e443 0%,#33a303 100%);
	background: -ms-linear-gradient(top, #a8e443 0%,#33a303 100%);
	background: linear-gradient(top, #a8e443 0%,#33a303 100%);

	-webkit-box-shadow: 0px 0px 30px rgba(255,255,255, 0.5);
	box-shadow: 0px 0px 30px rgba(255,255,255, 0.5);

	-webkit-animation: pulseShadow 1s infinite linear;
	-moz-animation: pulseShadow 1s infinite linear;
	-ms-animation: pulseShadow 1s infinite linear;
	-o-animation: pulseShadow 1s infinite linear;
	animation: pulseShadow 1s infinite linear;
}

.btn-play::after {
	content: "";
	display: block;
	position: absolute;
	left: 16px;
	top: 9px;
	border-bottom: 10px solid transparent;
	border-right: 10px solid transparent;
	border-left: 10px solid rgba(255, 255, 255, .85);
	border-top: 10px solid transparent;
}

.btn-play.active::after {
	left: 12px;
	top: 12px;
	border-bottom: 7px solid rgba(255, 255, 255, .85);
	border-right: 7px solid rgba(255, 255, 255, .85);
	border-left: 7px solid rgba(255, 255, 255, .85);
	border-top: 7px solid rgba(255, 255, 255, .85);
}

.btn-play.active .orbiter {
	display: block;
	position: absolute;
	z-index: 0;
	top: 19px;
	left: 19px;
	border-radius: 90%;
	background: transparent;

	-webkit-animation: rotater 2s infinite linear;
	-moz-animation: rotater 2s infinite linear;
	-ms-animation: rotater 2s infinite linear;
	-o-animation: rotater 2s infinite linear;
	animation: rotater 2s infinite linear;

	-webkit-box-shadow: 0em 1.3em 0.1em 0.20em #fff, 0.2em 1.3em 0.1em 0.20em #fff, 0em 1.3em 0.5em 0.45em #a8e443 , 0.2em 1.3em 0.5em 0.45em #a8e443;
	box-shadow: 0em 1.3em 0.1em 0.20em #fff, 0.2em 1.3em 0.1em 0.20em #fff, 0em 1.3em 0.5em 0.45em #a8e443 , 0.2em 1.3em 0.5em 0.45em #a8e443;
}

.active .pulse {
	border: 10px solid #fff601;
	background: transparent;
	border-radius: 60px;
	height: 60px;
	width: 60px;

	-webkit-animation: pulse 1500ms ease-out;
	-moz-animation: pulse 1500ms ease-out;
	-ms-animation: pulse 1500ms ease-out;
	-o-animation: pulse 1500ms ease-out;
	animation: pulse 1500ms ease-out;

	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	position: absolute;
	top: -21px;
	left: -21px;
	z-index: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
}

@keyframes "rotater" {
 0% {
    -webkit-transform: rotate(0deg);
   	-moz-transform: rotate(0deg);
   	-o-transform: rotate(0deg);
   	-ms-transform: rotate(0deg);
   	transform: rotate(0deg);
 }
 100% {
    -webkit-transform: rotate(360deg);
   	-moz-transform: rotate(360deg);
   	-o-transform: rotate(360deg);
   	-ms-transform: rotate(360deg);
   	transform: rotate(360deg);
 }

}

@-moz-keyframes rotater {
 0% {
   -moz-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 100% {
   -moz-transform: rotate(360deg);
   transform: rotate(360deg);
 }

}

@-webkit-keyframes "rotater" {
 0% {
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 100% {
   -webkit-transform: rotate(360deg);
   transform: rotate(360deg);
 }

}

@-ms-keyframes "rotater" {
 0% {
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 100% {
   -ms-transform: rotate(360deg);
   transform: rotate(360deg);
 }

}

@-o-keyframes "rotater" {
 0% {
   -o-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 100% {
   -o-transform: rotate(360deg);
   transform: rotate(360deg);
 }

}

@keyframes "pulse" {
 0% {
    -webkit-transform: scale(0);
   	-moz-transform: scale(0);
   	-o-transform: scale(0);
   	-ms-transform: scale(0);
   	transform: scale(0);
   	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   	filter: alpha(opacity=0);
   	opacity: 0;
 }
 64% {
    -webkit-transform: scale(0);
   	-moz-transform: scale(0);
   	-o-transform: scale(0);
   	-ms-transform: scale(0);
   	transform: scale(0);
   	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   	filter: alpha(opacity=0);
   	opacity: 0;
 }
 65% {
    -webkit-transform: scale(0.6);
   	-moz-transform: scale(0.6);
   	-o-transform: scale(0.6);
   	-ms-transform: scale(0.6);
   	transform: scale(0.6);
   	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
   	filter: alpha(opacity=50);
   	opacity: 0.5;
 }
 100% {
    -webkit-transform: scale(1);
   	-moz-transform: scale(1);
   	-o-transform: scale(1);
   	-ms-transform: scale(1);
   	transform: scale(1);
   	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   	filter: alpha(opacity=0);
   	opacity: 0.0;
 }

}

@-moz-keyframes pulse {
 0% {
   -moz-transform: scale(0);
   transform: scale(0);
   filter: alpha(opacity=0);
   opacity: 0;
 }
 64% {
   -moz-transform: scale(0);
   transform: scale(0);
   filter: alpha(opacity=0);
   opacity: 0;
 }
 65% {
   -moz-transform: scale(0.6);
   transform: scale(0.6);
   filter: alpha(opacity=50);
   opacity: 0.5;
 }
 100% {
   -moz-transform: scale(1);
   transform: scale(1);
   filter: alpha(opacity=0);
   opacity: 0.0;
 }

}

@-webkit-keyframes "pulse" {
 0% {
   -webkit-transform: scale(0);
   transform: scale(0);
   filter: alpha(opacity=0);
   opacity: 0;
 }
 64% {
   -webkit-transform: scale(0);
   transform: scale(0);
   filter: alpha(opacity=0);
   opacity: 0;
 }
 65% {
   -webkit-transform: scale(0.6);
   transform: scale(0.6);
   filter: alpha(opacity=50);
   opacity: 0.5;
 }
 100% {
   -webkit-transform: scale(1);
   transform: scale(1);
   filter: alpha(opacity=0);
   opacity: 0.0;
 }

}

@-ms-keyframes "pulse" {
 0% {
   -ms-transform: scale(0);
   transform: scale(0);
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
 }
 64% {
   -ms-transform: scale(0);
   transform: scale(0);
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
 }
 65% {
   -ms-transform: scale(0.6);
   transform: scale(0.6);
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
   filter: alpha(opacity=50);
   opacity: 0.5;
 }
 100% {
   -ms-transform: scale(1);
   transform: scale(1);
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0.0;
 }

}

@-o-keyframes "pulse" {
 0% {
   -o-transform: scale(0);
   transform: scale(0);
   filter: alpha(opacity=0);
   opacity: 0;
 }
 64% {
   -o-transform: scale(0);
   transform: scale(0);
   filter: alpha(opacity=0);
   opacity: 0;
 }
 65% {
   -o-transform: scale(0.6);
   transform: scale(0.6);
   filter: alpha(opacity=50);
   opacity: 0.5;
 }
 100% {
   -o-transform: scale(1);
   transform: scale(1);
   filter: alpha(opacity=0);
   opacity: 0.0;
 }

}
</style>
</head>
<body>
  <h1>PLAYING</h1>  
<div class="btn-play active">
  <div class="pulse"></div>
  <div class="orbiter"></div>
</div>

<h1>STOP</h1>  
<div class="btn-play">
  <div class="orbiter"></div>
</div>
</body>
</html>

12. By Terry Tong

Made by Terry Tong. CSS Circle Play Button. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
  
<style>
body {
	background-color: #666;	
}
.round-button {
	box-sizing: border-box;
	display:block;
	width:80px;
	height:80px;
	padding-top: 14px;
	padding-left: 8px;
	line-height: 20px;
	border: 6px solid #fff;
	border-radius: 50%;
	color:#f5f5f5;
	text-align:center;
	text-decoration:none;
	background-color: rgba(0,0,0,0.5);
	font-size:20px;
	font-weight:bold;
	transition: all 0.3s ease;
}
.round-button:hover {
	background-color: rgba(0,0,0,0.8);
	box-shadow: 0px 0px 10px rgba(255,255,100,1);
	text-shadow: 0px 0px 10px rgba(255,255,100,1);
}
</style>
</head>
<body>
  <a href="#" class="round-button"><i class="fa fa-play fa-2x"></i></a>
</body>
</html>

13. By Amy Carrigan

Made by Amy Carrigan. CSS Media player with play pause buttons. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://wvus-ibu.github.io/swing/css/style.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Lato:ital,[email protected],300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&amp;family=Lora:[email protected];1&amp;display=swap'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css'>
  
<style>
button {
  padding: 0;
}
body {
  align-items: center;
  background-color: #fff8e7;
  color: #545454;
  display: flex;
  height: 100vh;
  justify-content: center;
  position: relative;
}
body:before {
  background: no-repeat 23vw 30vh url("https://assets.codepen.io/518555/sparkles1.svg"), no-repeat right 25vw bottom 30vh url("https://assets.codepen.io/518555/sparkles4.svg"), no-repeat 40vw 30vh / 35vw url("https://assets.codepen.io/518555/blobStripe.svg");
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
body:after {
  background: no-repeat 25vw 40vh / 30vw url("https://assets.codepen.io/518555/blobSolid.svg");
  content: '';
  height: 100%;
  left: 0;
  opacity: 0.8;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -2;
}
.media-controls {
  align-items: center;
  background: #fffaee;
  border: 1px solid #fff3eb;
  border-radius: 24px;
  color: #565656;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 24px;
  max-width: calc(100% - 24px * 2);
  padding: 24px;
  position: relative;
}
.media-controls:after {
  border-radius: 24px;
  box-shadow: 0 2px 2px rgba(255, 107, 0, 0.25), 0 4px 4px rgba(255, 107, 0, 0.2), 0 8px 8px rgba(255, 107, 0, 0.15), 0 16px 16px rgba(255, 107, 0, 0.1), 0 24px 24px rgba(255, 107, 0, 0.05);
  content: '';
  height: 100%;
  left: 0;
  mix-blend-mode: multiply;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.media-buttons {
  display: flex;
  flex-wrap: nowrap;
}
.media-button {
  background-color: transparent;
  border: none;
  align-items: center;
  border-radius: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
@media (min-width: 421px) {
  .media-button {
    padding: 12px;
  }
}
.button-icons {
  background-color: #ffc399;
  border-radius: 100%;
  margin-bottom: 4px;
  margin-top: auto;
  padding: 16px;
}
.back-button .button-icons,
.skip-button .button-icons {
  background-color: transparent;
  color: #919191;
}
.rewind-button .button-icons,
.fast-forward-button .button-icons {
  background: linear-gradient(to bottom left, #fff8e7, #ffe1cc);
  color: #838383;
}
.play-button .button-icons {
  background: linear-gradient(to bottom left, #ffffff, #fff8e7);
  border: 1px solid #fff3eb;
  box-shadow: -1px 1px 1px rgba(255, 195, 153, 0.25), 1px -1px 1px rgba(255, 255, 255, 0.25), -2px 2px 2px rgba(255, 195, 153, 0.2), 2px -2px 2px rgba(255, 255, 255, 0.2), -4px 4px 4px rgba(255, 195, 153, 0.15), 4px -4px 4px rgba(255, 255, 255, 0.15), -8px 8px 8px rgba(255, 195, 153, 0.1), 8px -8px 8px rgba(255, 255, 255, 0.1), -16px 16px 16px rgba(255, 195, 153, 0.05), 16px -16px 16px rgba(255, 255, 255, 0.05);
  color: #f26600;
  margin-bottom: 8px;
  padding: 24px;
}
.button-text {
  margin-top: auto;
}
.media-progress {
  align-self: stretch;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.progress-bar-wrapper {
  background-color: transparent;
  border-radius: 12px;
  box-shadow: inset -1px 1px 1px rgba(255, 195, 153, 0.25), inset 1px -1px 1px rgba(255, 255, 255, 0.25), inset -2px 2px 2px rgba(255, 195, 153, 0.2), inset 2px -2px 2px rgba(255, 255, 255, 0.2), inset -4px 4px 4px rgba(255, 195, 153, 0.15), inset 4px -4px 4px rgba(255, 255, 255, 0.15), inset -8px 8px 8px rgba(255, 195, 153, 0.1), inset 8px -8px 8px rgba(255, 255, 255, 0.1), inset -16px 16px 16px rgba(255, 195, 153, 0.05), inset 16px -16px 16px rgba(255, 255, 255, 0.05);
  height: 12px;
  margin-bottom: 8px;
  margin-top: 24px;
  position: relative;
  width: 100%;
}
.progress-bar {
  background: linear-gradient(to right, #fdd25f, #ff6b00);
  border-radius: 12px;
  box-shadow: none;
  height: 12px;
  width: 44%;
}
</style>
</head>
<body>
  <div class="media-controls">
  <div class="media-buttons">
    <button class="back-button media-button" label="back">
      <i class="fas fa-step-backward button-icons"></i>
      <span class="button-text milli">Back</span>
    </button>

    <button class="rewind-button media-button" label="rewind">
      <i class="fas fa-backward button-icons"></i>
      <span class="button-text milli">Rewind</span>
    </button>

    <button class="play-button media-button" label="play">
      <i class="fas fa-play button-icons delta"></i>
      <span class="button-text milli">Play</span>
    </button>

    <button class="fast-forward-button media-button" label="fast forward">

      <i class="fas fa-forward button-icons"></i>
      <span class="button-text milli">Forward</span>
    </button>

    <button class="skip-button media-button" label="skip">
      <i class="fas fa-step-forward button-icons"></i>
      <span class="button-text milli">Skip</span>
    </button>
  </div>
  <div class="media-progress">
    <div class="progress-bar-wrapper progress">
      <div class="progress-bar">
      </div>
    </div>
    <div class="progress-time-current milli">
      15:23
    </div>
    <div class="progress-time-total milli">
      34:40
    </div>
  </div>
</div>
</body>
</html>

14. By Ian Soper

Made by Ian Soper. Scalable Play Pause Buttons with Pure CSS, made with LESS. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
menu {
  /* @size sets the relative size of the buttons, define before calling the buttons mixin */
  /* Play */
  /* Stop */
  /* Fast-Forward */
  /* Rewind */
  /* Pause */
  margin: 2em auto;
  text-align: center;
  position: relative;
}
menu button {
  position: relative;
  display: inline-block;
  padding: 0.6em;
  background: linear-gradient(#fff, #ccc), #c9c5c9;
  border-radius: 10em;
  border: 0 solid #d0d0d0;
  width: 8em;
  height: 8em;
  margin-right: 20px;
  box-shadow: 0 0.48em 0.56em rgba(0, 0, 0, 0.4);
}
menu button:hover {
  background: linear-gradient(#f5f5f5, #b9b9b9), #c9c5c9;
}
menu button:before,
menu button:after {
  position: absolute;
  content: " ";
}
menu button:active {
  top: 0.4em;
  box-shadow: 0 0.16em 0.24em rgba(0, 0, 0, 0.4);
}
menu .play:before {
  z-index: 2;
  top: 1.76em;
  left: 2.88em;
  width: 0;
  height: 0;
  border: 2.4em solid transparent;
  border-left-color: rgba(100, 100, 100, 0.8);
  border-left-width: 3.6em;
}
menu .play:hover:before {
  border-left-color: rgba(36, 36, 36, 0.8);
}
menu .stop:before {
  top: 2.24em;
  left: 2.24em;
  width: 3.76em;
  height: 3.76em;
  background: rgba(100, 100, 100, 0.8);
}
menu .stop:hover:before {
  background: rgba(36, 36, 36, 0.8);
}
menu .ff:before,
menu .ff:after {
  width: 0;
  height: 0;
  top: 2.08em;
  border: 2em solid transparent;
  border-left-color: rgba(100, 100, 100, 0.8);
  border-left-width: 2.16em;
}
menu .ff:before {
  left: 2.4em;
}
menu .ff:after {
  left: 4.528em;
  content: " ";
}
menu .ff:hover:before,
menu .ff:hover:after {
  border-left-color: rgba(36, 36, 36, 0.8);
}
menu .rw:before,
menu .rw:after {
  width: 0;
  height: 0;
  top: 2.08em;
  border: 2em solid transparent;
  border-right-color: rgba(100, 100, 100, 0.8);
  border-right-width: 2.16em;
}
menu .rw:before {
  left: 1.76em;
}
menu .rw:after {
  left: -0.4em;
  content: " ";
}
menu .rw:hover:after,
menu .rw:hover:before {
  border-right-color: rgba(36, 36, 36, 0.8);
}
menu .pause:before,
menu .pause:after {
  height: 3.76em;
  width: 1.52em;
  left: 2.32em;
  top: 2.24em;
  display: block;
  background-color: rgba(100, 100, 100, 0.8);
}
menu .pause:after {
  left: 4.32em;
}
menu .pause:hover:before,
menu .pause:hover:after {
  background-color: rgba(36, 36, 36, 0.8);
}
menu.medium {
  /* Play */
  /* Stop */
  /* Fast-Forward */
  /* Rewind */
  /* Pause */
}
menu.medium button {
  position: relative;
  display: inline-block;
  padding: 0.6em;
  background: linear-gradient(#fff, #ccc), #c9c5c9;
  border-radius: 10em;
  border: 0 solid #d0d0d0;
  width: 5em;
  height: 5em;
  margin-right: 20px;
  box-shadow: 0 0.3em 0.35em rgba(0, 0, 0, 0.4);
}
menu.medium button:hover {
  background: linear-gradient(#f5f5f5, #b9b9b9), #c9c5c9;
}
menu.medium button:before,
menu.medium button:after {
  position: absolute;
  content: " ";
}
menu.medium button:active {
  top: 0.25em;
  box-shadow: 0 0.1em 0.15em rgba(0, 0, 0, 0.4);
}
menu.medium .play:before {
  z-index: 2;
  top: 1.1em;
  left: 1.8em;
  width: 0;
  height: 0;
  border: 1.5em solid transparent;
  border-left-color: rgba(100, 100, 100, 0.8);
  border-left-width: 2.25em;
}
menu.medium .play:hover:before {
  border-left-color: rgba(36, 36, 36, 0.8);
}
menu.medium .stop:before {
  top: 1.4em;
  left: 1.4em;
  width: 2.35em;
  height: 2.35em;
  background: rgba(100, 100, 100, 0.8);
}
menu.medium .stop:hover:before {
  background: rgba(36, 36, 36, 0.8);
}
menu.medium .ff:before,
menu.medium .ff:after {
  width: 0;
  height: 0;
  top: 1.3em;
  border: 1.25em solid transparent;
  border-left-color: rgba(100, 100, 100, 0.8);
  border-left-width: 1.35em;
}
menu.medium .ff:before {
  left: 1.5em;
}
menu.medium .ff:after {
  left: 2.83em;
  content: " ";
}
menu.medium .ff:hover:before,
menu.medium .ff:hover:after {
  border-left-color: rgba(36, 36, 36, 0.8);
}
menu.medium .rw:before,
menu.medium .rw:after {
  width: 0;
  height: 0;
  top: 1.3em;
  border: 1.25em solid transparent;
  border-right-color: rgba(100, 100, 100, 0.8);
  border-right-width: 1.35em;
}
menu.medium .rw:before {
  left: 1.1em;
}
menu.medium .rw:after {
  left: -0.25em;
  content: " ";
}
menu.medium .rw:hover:after,
menu.medium .rw:hover:before {
  border-right-color: rgba(36, 36, 36, 0.8);
}
menu.medium .pause:before,
menu.medium .pause:after {
  height: 2.35em;
  width: 0.95em;
  left: 1.45em;
  top: 1.4em;
  display: block;
  background-color: rgba(100, 100, 100, 0.8);
}
menu.medium .pause:after {
  left: 2.7em;
}
menu.medium .pause:hover:before,
menu.medium .pause:hover:after {
  background-color: rgba(36, 36, 36, 0.8);
}
menu.small {
  /* Play */
  /* Stop */
  /* Fast-Forward */
  /* Rewind */
  /* Pause */
}
menu.small button {
  position: relative;
  display: inline-block;
  padding: 0.6em;
  background: linear-gradient(#fff, #ccc), #c9c5c9;
  border-radius: 10em;
  border: 0 solid #d0d0d0;
  width: 3em;
  height: 3em;
  margin-right: 20px;
  box-shadow: 0 0.18em 0.21em rgba(0, 0, 0, 0.4);
}
menu.small button:hover {
  background: linear-gradient(#f5f5f5, #b9b9b9), #c9c5c9;
}
menu.small button:before,
menu.small button:after {
  position: absolute;
  content: " ";
}
menu.small button:active {
  top: 0.15em;
  box-shadow: 0 0.06em 0.09em rgba(0, 0, 0, 0.4);
}
menu.small .play:before {
  z-index: 2;
  top: 0.66em;
  left: 1.08em;
  width: 0;
  height: 0;
  border: 0.9em solid transparent;
  border-left-color: rgba(100, 100, 100, 0.8);
  border-left-width: 1.35em;
}
menu.small .play:hover:before {
  border-left-color: rgba(36, 36, 36, 0.8);
}
menu.small .stop:before {
  top: 0.84em;
  left: 0.84em;
  width: 1.41em;
  height: 1.41em;
  background: rgba(100, 100, 100, 0.8);
}
menu.small .stop:hover:before {
  background: rgba(36, 36, 36, 0.8);
}
menu.small .ff:before,
menu.small .ff:after {
  width: 0;
  height: 0;
  top: 0.78em;
  border: 0.75em solid transparent;
  border-left-color: rgba(100, 100, 100, 0.8);
  border-left-width: 0.81em;
}
menu.small .ff:before {
  left: 0.9em;
}
menu.small .ff:after {
  left: 1.698em;
  content: " ";
}
menu.small .ff:hover:before,
menu.small .ff:hover:after {
  border-left-color: rgba(36, 36, 36, 0.8);
}
menu.small .rw:before,
menu.small .rw:after {
  width: 0;
  height: 0;
  top: 0.78em;
  border: 0.75em solid transparent;
  border-right-color: rgba(100, 100, 100, 0.8);
  border-right-width: 0.81em;
}
menu.small .rw:before {
  left: 0.66em;
}
menu.small .rw:after {
  left: -0.15em;
  content: " ";
}
menu.small .rw:hover:after,
menu.small .rw:hover:before {
  border-right-color: rgba(36, 36, 36, 0.8);
}
menu.small .pause:before,
menu.small .pause:after {
  height: 1.41em;
  width: 0.57em;
  left: 0.87em;
  top: 0.84em;
  display: block;
  background-color: rgba(100, 100, 100, 0.8);
}
menu.small .pause:after {
  left: 1.62em;
}
menu.small .pause:hover:before,
menu.small .pause:hover:after {
  background-color: rgba(36, 36, 36, 0.8);
}
/*
The buttons mixin that defines the buttons styles, the @size must be defined to set the relative size
*/
/*
Other Styles
*/
body {
  background: #c1c1c1;
}
</style>
</head>
<body>
  <menu>
 <button class="rw"></button>
<button class="play"></button>
  <button class="pause"></button>
  <button class="stop"></button>
  <button class="ff"></button>
</menu>


<menu class="medium">
 <button class="rw"></button>
<button class="play"></button>
  <button class="pause"></button>
  <button class="stop"></button>
  <button class="ff"></button>
</menu>

<menu class="small">
 <button class="rw"></button>
<button class="play"></button>
  <button class="pause"></button>
  <button class="stop"></button>
  <button class="ff"></button>
</menu>
</body>
</html>

15. By Arnold Longequeue

Made by Arnold Longequeue. Play button with loading animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.stroke-solid {
  stroke-dashoffset: 0;
  stroke-dashArray: 300;
  stroke-width: 4px;
  transition: stroke-dashoffset 1s ease,  opacity 1s ease;
}

.icon {
  transform: scale(0.8);
  transform-origin: 50% 50%;
  transition: transform 200ms ease-out;
}

#play:hover .stroke-solid {
  opacity: 1;
  stroke-dashoffset: 300;
}
#play:hover .icon {
  transform: scale(0.9);
}

html {
  height: 100%;
}

body {
  height: 100%;
  background-image: url("http://taylorswines.uat.playhousedigital.com/media/wysiwyg/TaylorsWines/Homepage/img_video.png");
}

#play {
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
</style>
</head>
<body>
  <svg version="1.1" id="play" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="100px" width="100px"
	 viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
  <path class="stroke-solid" fill="none" stroke="#ddbe72"  d="M49.9,2.5C23.6,2.8,2.1,24.4,2.5,50.4C2.9,76.5,24.7,98,50.3,97.5c26.4-0.6,47.4-21.8,47.2-47.7
    C97.3,23.7,75.7,2.3,49.9,2.5"/>
  <path class="icon" fill="#ddbe72" d="M38,69c-1,0.5-1.8,0-1.8-1.1V32.1c0-1.1,0.8-1.6,1.8-1.1l34,18c1,0.5,1,1.4,0,1.9L38,69z"/>
</svg>
</body>
</html>