trocando botão com css

Como que eu faço para troca os botões usando css? Segue código:

  <div class="frenteDois container col-12 row">
          <div class="starButton ">
              <i class="fa fa-play-circle fa-2x" aria-hidden="true"></i>
          </div>
        <div class="cronometroDois col-2 text-center">
            08:00
        </div>

        </div>

código do render.js:

const {ipcRenderer} = require('electron');

let linkSobre = document.querySelector('#link-sobre');
let buttonPlay = document.querySelector('.fa-play-circle');

linkSobre.addEventListener('click', function(){
    ipcRenderer.send('abrir-janela-sobre');
});

let img = ['fa fa-play-circle fa-2x','fa fa-pause-circle fa-2x'];

buttonPlay.addEventListener('click', () =>{
  img = img.reverse();
    buttonPlay.getElementsByClassName( img[0] );
});