getterDemo.css

button {
  border: none; /* Remove borders */
  color: white; /* Add a text color */
  padding: 14px 28px; /* Add some padding */
  cursor: pointer; /* Add a pointer cursor on mouse-over */
  background-color: #e7e7e7;
   color: black;
  border:1px solid black;
}
.green{
    background:green;
}
.red{
    background:red;
}

.box{
    height:100px;
    width:100px;
    border:1px solid black;
}

getterDemo.html

<template>
    <div class="slds-m-bottom_large">
    <lightning-card title="Getter Demo" icon-name="custom:custom20">
        <div class="slds-m-around_medium">
            <h1 class="slds-text-heading_large">{getTitle}</h1>
        </div>

        <div class="slds-m-around_medium">
           <button onclick={clickHandler}>ON</button>
           <button onclick={clickHandler}>OFF</button>
        </div>
        <div class="slds-m-around_medium">
            <div class={boxStatus}></div>
        </div>
    </lightning-card>
    </div>
</template>

getterDemo.js

import { LightningElement } from "lwc";

export default class GetterDemo extends LightningElement {
  title = "This is a Getter power";
  selectedBtn = "OFF";
  get getTitle() {
    return this.title.toUpperCase();
  }

  get boxStatus() {
    return `box ${this.selectedBtn === 'ON' ? 'green':'red'}`
    // return this.selectedBtn === "ON" ? "box green" : "box red";
  }
  clickHandler(event) {
    console.log(event.currentTarget.innerText);
    this.selectedBtn = event.currentTarget.innerText;
  }
}