Reduce CSS Duplication

[asasass]

How would I place these classes,

.wrapa.active, .wrapb.active, .wrapc.active, .wrapd.active, .wrape.active, .wrapf.active, .wrapg.active, .wraph.active, .wrapi.active

.wrapa, wrapb, .wrapc,.wrapd, .wrape, .wrapf, .wrapg, .wrah, .wrapi

On these?

I wasn’t able to figure it out.
https://jsfiddle.net/ydet3ufk/

Instead of using 9 groups of these separately,
I would be using 1.

Is this able to be done?

.wrapa.active .button {
  transform: translateZ(20px) rotateX(25deg);
  box-shadow: 0 -10px 20px #ff1818;
}

.wrapa.active .button .light {
  animation: flicker 0.2s infinite 0.3s;
}

.wrapa.active .button .shine {
  opacity: 1;
}

.wrapa.active .button .shadow {
  opacity: 0;
}

.wrapa .button {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  transform-origin: center center -20px;
  transform: translateZ(20px) rotateX(-25deg);
  transform-style: preserve-3d;
  background-color: #9b0621;
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
  background: linear-gradient(#980000 0%, #6f0000 30%, #6f0000 70%, #980000 100%);
  background-repeat: no-repeat;
}

.wrapa .button::before {
  content: "";
  background: linear-gradient(rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.3) 30%, #650000 75%, #320000) 50% 50%/97% 97%, #b10000;
  background-repeat: no-repeat;
  width: 100%;
  height: 50px;
  transform-origin: top;
  transform: rotateX(-90deg);
  position: absolute;
  top: 0;
}

.wrapa .button::after {
  content: "";
  background-image: linear-gradient(#650000, #320000);
  width: 100%;
  height: 50px;
  transform-origin: top;
  transform: translateY(50px) rotateX(-90deg);
  position: absolute;
  bottom: 0;
  box-shadow: 0 50px 8px 0px black, 0 80px 20px 0px rgba(0, 0, 0, 0.5);
}

.wrapa .light {
  opacity: 0;
  animation: light-off 1s;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%);
}

.wrapa .dots {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%);
  background-size: 10px 10px;
}

.wrapa .characters {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, white) 50% 20%/5% 20%, radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80%/33% 25%;
  background-repeat: no-repeat;
}

.wrapa .shine {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  opacity: 0.3;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%, linear-gradient(rgba(255, 255, 255, 0.5), transparent 50%, transparent 80%, rgba(255, 255, 255, 0.5)) 50% 50%/97% 97%;
  background-repeat: no-repeat;
}

.wrapa .shadow {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  opacity: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.8));
  background-repeat: no-repeat;
}

@keyframes flicker {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}

@keyframes light-off {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
}

[PaulOB]

You know this?

Look at what you are doing. Do you think adding the very same keyframes 6 times is going to change anything. It’s the same code so adding it again makes no difference.

Anyway the problem is that you changed the class on every row and used that new class for some strange reason instead of leaving it as it was. You are not changing any of the design (only its position) so why did you think you would need a uniques set of css for every button?

t’s the same button and its CSS will work wherever you place the button ads many times as you like. Just use the common class.

.container {
  display: grid;
  grid-template-columns: 194px 194px 194px;
  justify-content: center;
  overflow: hidden;
}

.a {
  position: relative;
  background-color: black;
  /*  width: 150px; /* delete */
  margin: 2px;
  height: 195px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black;
  border-radius: 5px;
  padding: 20px;
  perspective: 700px;
}



.playButton.active .button {
  transform: translateZ(20px) rotateX(25deg);
  box-shadow: 0 -10px 20px #ff1818;

}


.playButton.active .button .light {
  animation: flicker 0.2s infinite 0.3s;

}


.playButton.active .button .shine {
  opacity: 1;

}


.playButton.active .button .shadow {
  opacity: 0;

}

.playButton .button {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  transform-origin: center center -20px;
  transform: translateZ(20px) rotateX(-25deg);
  transform-style: preserve-3d;
  background-color: #9b0621;
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
  background: linear-gradient(#980000 0%, #6f0000 30%, #6f0000 70%, #980000 100%);
  background-repeat: no-repeat;

}


.playButton .button::before {
  content: "";
  background: linear-gradient(rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.3) 30%, #650000 75%, #320000) 50% 50%/97% 97%, #b10000;
  background-repeat: no-repeat;
  width: 100%;
  height: 50px;
  transform-origin: top;
  transform: rotateX(-90deg);
  position: absolute;
  top: 0;

}


.playButton .button::after {
  content: "";
  background-image: linear-gradient(#650000, #320000);
  width: 100%;
  height: 50px;
  transform-origin: top;
  transform: translateY(50px) rotateX(-90deg);
  position: absolute;
  bottom: 0;
  box-shadow: 0 50px 8px 0px black, 0 80px 20px 0px rgba(0, 0, 0, 0.5);

}


.playButton .light {
  opacity: 0;
  animation: light-off 1s;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%);

}


.playButton .dots {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%);
  background-size: 10px 10px;

}


.playButton .characters {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, white) 50% 20%/5% 20%, radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80%/33% 25%;
  background-repeat: no-repeat;

}


.playButton .shine {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  opacity: 0.3;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%, linear-gradient(rgba(255, 255, 255, 0.5), transparent 50%, transparent 80%, rgba(255, 255, 255, 0.5)) 50% 50%/97% 97%;
  background-repeat: no-repeat;

}


.playButton .shadow {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  opacity: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.8));
  background-repeat: no-repeat;
}

@keyframes flicker {
  0% {
    opacity: 1;
  }

  80% {
    opacity: 0.8;
  }

  100% {
    opacity: 1;
  }
}

@keyframes light-off {
  0% {
    opacity: 1;
  }

  80% {
    opacity: 0;
  }
}

Rather than copy and paste think a bit about what you are doing and life will get easier

[asasass]

Looking at how the html and css of this is set up, would I be able to put more than 1 button under a single wrap?

https://jsfiddle.net/9suj6Lnf/

Would I be able to put multiple?

Which would allow me to use one piece of javascript instead of 9.

https://jsfiddle.net/L09r2mxa/

<div class="wrapa">

  <div class="playButton svoefm" data-audio="http://getradio.me/svoefm">
    <svg class="play" width="12" height="14" viewbox="0 0 85 100">

      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
      </path>
    </svg>

    <svg class="pause hide" width="10" height="14" viewbox="0 0 60 100">

      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z">
      </path>
    </svg>
  </div>

  <div class="playButton soundpark" data-audio="http://5.199.142.63:8020/radio">
    <svg class="play" width="12" height="14" viewbox="0 0 85 100">

      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
      </path>
    </svg>

    <svg class="pause hide" width="10" height="14" viewbox="0 0 60 100">

      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z">
      </path>
    </svg>
  </div>

  <div class="playButton cavoparadisoclub" data-audio="http://s5.onweb.gr:8488/;">
    <svg class="play" width="12" height="14" viewbox="0 0 85 100">

      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
      </path>
    </svg>

    <svg class="pause hide" width="10" height="14" viewbox="0 0 60 100">

      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z">
      </path>
    </svg>
  </div>
  <div class="lines"></div>
</div>

[asasass]

Something like this?

but then how would the html be added?

https://jsfiddle.net/op2xj4hg/

<div class="wrapa">

  <div class="playButton wrapa a" data-audio="http://getradio.me/svoefm">
    <div class="button">
      <div class="light"></div>
      <div class="dots"></div>
      <div class="characters"></div>
      <div class="shine"></div>
      <div class="shadow"></div>
    </div>
  </div>


  <div class="playButton wrapb a" data-audio="http://getradio.me/svoefm">
    <div class="button">
      <div class="light"></div>
      <div class="dots"></div>
      <div class="characters"></div>
      <div class="shine"></div>
      <div class="shadow"></div>
    </div>
  </div>


  <div class="playButton wrapc a" data-audio="http://getradio.me/svoefm">
    <div class="button">
      <div class="light"></div>
      <div class="dots"></div>
      <div class="characters"></div>
      <div class="shine"></div>
      <div class="shadow"></div>
    </div>
  </div>



  <div class="playButton wrapd a">
    <div class="button">
      <div class="light"></div>
      <div class="dots"></div>
      <div class="characters"></div>
      <div class="shine"></div>
      <div class="shadow"></div>
    </div>
  </div>

  <div class="playButton wrape a">
    <div class="button">
      <div class="light"></div>
      <div class="dots"></div>
      <div class="characters"></div>
      <div class="shine"></div>
      <div class="shadow"></div>
    </div>
  </div>

  <div class="playButton wrapf a">
    <div class="button">
      <div class="light"></div>
      <div class="dots"></div>
      <div class="characters"></div>
      <div class="shine"></div>
      <div class="shadow"></div>
    </div>
  </div>

  <div class="playButton wrapg a">
    <div class="button">
      <div class="light"></div>
      <div class="dots"></div>
      <div class="characters"></div>
      <div class="shine"></div>
      <div class="shadow"></div>
    </div>
  </div>

  <div class="playButton wraph a">
    <div class="button play pause ">
      <div class="light"></div>
      <div class="dots"></div>
      <div class="characters"></div>
      <div class="shine"></div>
      <div class="shadow"></div>
    </div>
  </div>

  <div class="playButton wrapi a">
    <div class="button">
      <div class="light"></div>
      <div class="dots"></div>
      <div class="characters"></div>
      <div class="shine"></div>
      <div class="shadow"></div>
    </div>
  </div>

</div>

[asasass]

I did it
https://jsfiddle.net/jqt93cos/

Updated: Removed .a .wrapa - .wrapi no longer needed.

.playButton {
  position: relative;
  background-color: black;
  /*  width: 150px; /* delete */
  margin: 2px;
  height: 195px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black;
  border-radius: 5px;
  padding: 20px;
  perspective: 700px;
}

  <div class="playButton">
    <div class="button">
      <div class="light"></div>
      <div class="dots"></div>
      <div class="characters"></div>
      <div class="shine"></div>
      <div class="shadow"></div>
    </div>
  </div>