title: Change background color of buttons onclick
body: <p>I have two buttons called <strong>YES</strong> and <strong>NO</strong> whose color(i,e background-color) is light like this:</p>
  
  <p><a href="https://i.stack.imgur.com/14l0e.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/14l0e.png" alt="enter image description here"></a></p>
  
  <blockquote>
    <p>When the user click <strong>YES</strong></p>
  </blockquote>
  
  <ul>
  <li><strong>YES</strong> button background color should change to green (i,e success) and <strong>NO</strong> should be in light color like this:</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/M7iJU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M7iJU.png" alt="enter image description here"></a></p>
  
  <blockquote>
    <p>When the user click <strong>No</strong></p>
  </blockquote>
  
  <ul>
  <li><strong>NO</strong> button background color should change to red (i,e danger) and <strong>Yes</strong> should be in light color like this:</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/1ZnIH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1ZnIH.png" alt="enter image description here"></a></p>
  
  <p><strong><a href="https://stackblitz.com/edit/ionic-4-template-vr5byq?file=src/app/home/home.page.html" rel="nofollow noreferrer">DEMO</a></strong></p>
  
  <p>while surfing i saw this <strong><a href="https://stackoverflow.com/questions/51716059/change-background-color-of-the-button-on-click">question</a></strong>. Here they are changing only one <strong>button</strong> color on <strong>click</strong>. But for my requirement both the <strong>button</strong> color should change on <strong>click</strong>.</p>
  
  <p>CODE</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ion-content padding&gt;
    &lt;ion-item lines="none"&gt;
    &lt;ion-button class="btn-1" expand="full" color="light" &gt;Yes&lt;/ion-button&gt;
     &lt;ion-button class="btn-2" expand="full"  color="light" &gt;No&lt;/ion-button&gt; 
    &lt;/ion-item&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.btn-1{
  width:45%;
  float:left;
  padding:0px 5px 0px 5px;
  margin-bottom:20px;
  }
  .btn-2{
  width:45%;
  float:right;
  padding:0px 5px 0px 5px;
  margin-bottom:20px;
  }
  </code></pre>
  
  <p><strong>TS</strong></p>
  
  <pre><code> import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.css'],
  })
  export class HomePage {
  
  }
  </code></pre>