Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
  <div class="clappingboard">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M2 10H22V18C22 19.6569 20.6569 21 19 21H5C3.34315 21 2 19.6569 2 18V10Z" fill="black"/>
      <g class="clap">
        <path d="M15.4835 3H10.6594L8.51654 8H13.3406L15.4835 3Z" fill="black"/>
        <path d="M15.5165 8H22V6C22 4.34315 20.6569 3 19 3H17.6594L15.5165 8Z" fill="black"/>
        <path d="M5 3H8.48346L6.3406 8H2V6C2 4.34315 3.34315 3 5 3Z" fill="black"/>
      </g>
    </svg>
    <div class="light"></div>
  </div>
  <audio id="clapSound">
    <source preload="auto" src="https://v1.cdnpk.net/videvo_files/audio/premium/audio0086/watermarked/FILM-CLAPPER_GEN-HDF-11053_preview.mp3" type="audio/mp3">
  </audio>
</div>
</body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
*
  box-sizing: border-box

.container
  position: absolute
  left: calc(50% - 24px)
  top: calc(50% - 24px)
  transform: scale(1.5)

.clappingboard
  position: relative
  width: 48px
  height: 48px
  border-radius: 24px
  padding: 12px
  cursor: pointer
  -webkit-tap-highlight-color: transparent
  transition: background .2s ease
  
  .clap
    transition: all .2s ease

.light
    position: absolute
    top: 26px
    left: 17px
    width: 3px
    height: 3px
    border-radius: 50%
    background: #8C8C8C
  
  &:hover
    background: rgba(black,.04)

.clap
      transform: rotate(-10deg) translate3d(-1.5px,1px,0)
    
  &.active
    animation: clipclap .2s forwards
    animation-delay: .06s
    
    .clap
      transform: rotate(0) translate3d(0,0,0)
      
    .light
      background: #FF2828
      box-shadow: 0 0 3px .5px #FF2828

@keyframes clipclap
  0%
    transform: translate3d(0,0,0) rotate(0)
  40%
    transform: translate3d(0,1px,0) rotate(4deg)
  1000%
    transform: translate3d(0,0,0) rotate(0)

Frontend Forever App