<div class="buttons">
  <button class="btn" onClick="addEmphasis(this.id)" id="filled">Filled</button>
  <button class="btn" onClick="addEmphasis(this.id)" id="open">Open</button>
  <button class="btn" onClick="addEmphasis(this.id)" id="dot">Dot</button>
  <button class="btn" onClick="addEmphasis(this.id)" id="double-circle">Double Circle</button>
  <button class="btn" onClick="addEmphasis(this.id)" id="triangle">Triangle</button>
  <button class="btn" onClick="addEmphasis(this.id)" id="sesame">Sesame</button>
  <button class="btn" onClick="addEmphasis(this.id)" id="shape1">点</button>
  <button class="btn" onClick="addEmphasis(this.id)" id="shape2">*</button>
</div>

<h2 >I'd far rather be <span id="selectedText">happy than right</span> any day</h2>

<div class="buttons">
  <button class="btn" onClick="addEmphasisPosition(this.id)" id="bottom">Bottom</button>
  <button class="btn" onClick="addEmphasisPosition(this.id)" id="top">Top</button>
</div>

<div class="buttons">
  <button class="btn" onClick="addEmphasisColor(this.id)" id="red">Red</button>
  <button class="btn" onClick="addEmphasisColor(this.id)" id="green">Green</button>
  <button class="btn" onClick="addEmphasisColor(this.id)" id="blue">Blue</button>
</div>

body{
  background-color:#FFC857;
  font-family: sans-serif;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  gap:50px;
  height:100vh;
  width:100%;
}

.button{
  display:flex;
  gap:10px;
}

.btn{
  text-decoration:none;
  background-color:#000;
  color:#FFC857;
  padding:10px 20px;
  border-radius:5px;
  cursor: pointer;
  border:2px solid #000;
  transition: .5s all ease-in-out;
}

#red{
  background-color:red;
  border:2px solid red;
}

#green{
  background-color:green;
  border:2px solid green;
}

#blue{
  background-color:blue;
  border:2px solid blue;
}

.btn:hover{
  background-color:#FFC857;
  color:#000;
  border:2px solid #000;
}

.filled{
  text-emphasis: filled;
-webkit-text-emphasis: filled;
}

.open{
  text-emphasis: open;
-webkit-text-emphasis: open;
}

.dot{
  text-emphasis: dot;
-webkit-text-emphasis: dot;
}

.double-circle{
  text-emphasis: double-circle;
-webkit-text-emphasis: double-circle;
}

.triangle{
  text-emphasis: triangle;
-webkit-text-emphasis: triangle;
}

.sesame{
  text-emphasis: sesame;
-webkit-text-emphasis: sesame;
}

.shape1{
  text-emphasis: '点';
-webkit-text-emphasis: '点';
}

.shape2{
  text-emphasis: '*';
-webkit-text-emphasis: '*';
}

.bottom{
    text-emphasis-position: under;
    -webkit-text-emphasis-position: under;
}

.top{
    text-emphasis-position: over;
    -webkit-text-emphasis-position: over;
}

.red{
      /*   color:red; */
     text-emphasis-color: red;
    -webkit-text-emphasis-color: red;
}

.green{
      /*   color:green; */
     text-emphasis-color: green;
    -webkit-text-emphasis-color: green;
}

.blue{
      /*   color:blue; */
     text-emphasis-color: blue;
    -webkit-text-emphasis-color: blue;
}

var textElement = document.getElementById('selectedText');

function addEmphasis(clicked_id){
  textElement.classList.remove(...textElement.classList);
  textElement.classList.add(clicked_id);
}

function addEmphasisPosition(clicked_id){
  if(clicked_id == 'top' || 'bottom'){
    textElement.classList.remove('top');
    textElement.classList.remove('bottom');
  }
  textElement.classList.add(clicked_id);
}


function addEmphasisColor(clicked_id){
  if(clicked_id == 'red' || 'green' || 'blue'){
    textElement.classList.remove('red');
    textElement.classList.remove('green');
    textElement.classList.remove('blue');
  }
  textElement.classList.add(clicked_id);
  
}