How to create a play/pause button with awesome font

Question

Hi I’m trying to make the Play/Pause button be just a button but keeping the two IDS, because each ID makes a function, Someone knows how to unify the buttons by transforming them into one. When you click on pause the play icon appears, when you click on play the pause icon. I read a lot more I couldn’t get.

#myBtn i{
        font-size: 30px;
        margin-left: 60px;
        color: #000;    
        z-index: 999;
        cursor: pointer;
        position: absolute;
        bottom: 0;
        }


#myBtn2 i{
        font-size: 30px;
        color: #000;    
        z-index: 999;
        cursor: pointer;
        position: absolute;
        bottom: 0;
    }

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="myBtn"><i class="fa fa-play" aria-hidden="true"></i></div>
            <div id="myBtn2"><i class="fa fa-pause" aria-hidden="true"></i></div>

Answer 1

An option without JS, but ai vc needs to follow the HTML structure, because it depends on the CSS selectors to show one and hide the other.

I left the radios visible so you can test, but just hide them after decoding the CSS I left. It would be nice you use some aria attributes to give more semantics to your component!

.controls {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1rem;
  margin-top: 1rem;
  position: relative;
}
.controls label {
  position: absolute;
}
#myBtn,
#myBtn2 {
  display: none;
}
#play:checked ~ .controls #myBtn,
#pause:checked ~ .controls #myBtn2 {
  display: block;
}
/* depois desconemte esse CSS para esconder os Radios 
[name="player"] {
  display: none;
}
*/  

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div id="player">
  <input type="radio" name="player" id="play" checked>
  <input type="radio" name="player" id="pause">
  <div class="controls">
    <label id="myBtn" for="pause"><i class="fa fa-play" aria-hidden="true"></i></label>
    <label id="myBtn2" for="play"><i class="fa fa-pause" aria-hidden="true"></i></label>
  </div>
</div>