<h1>Youtube Play/Pause Button Animation</h1>
<a class="play-button" href="#">
  <div class="left"></div>
  <div class="right"></div>
  <div class="triangle-1"></div>
  <div class="triangle-2"></div>
</a>
@import url(https://fonts.googleapis.com/css?family=Roboto:300)

body
  background-color #c0392b
		
h1
  font-family 'Roboto', sans-serif
  font-weight 300
  font-size 2.5rem
  text-align center
  color white
  
.play-button
  height 300px
  width 300px
  display block
  margin 60px auto
  overflow hidden
  position relative
 
.left
  height 100%
  float left
  background-color white
  width 36%
  transition all 0.25s ease
  overflow hidden
.triangle-1
  transform translate(0, -100%)
.triangle-2
  transform translate(0, 100%)

.triangle-1, 
.triangle-2
  position absolute
  top 0
  right 0
  background-color transparent
  width 0
  height 0
  border-right 300px solid #c0392b
  border-top 150px solid transparent
  border-bottom 150px solid transparent
  transition transform 0.25s ease  

.right
  height 100%
  float right
  width 36%
  background-color white
  transition all 0.25s ease

.paused
  .left
    width 50%
  .right
    width 50% 
  .triangle-1
    transform translate(0, -50%)
  .triangle-2
    transform translate(0, 50%)
  
$(".play-button").click(function() {
  $(this).toggleClass("paused");
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js