Make input radio button looks like a pressable button. HTML syntax is using Angular framework.

radio-button.html

<form class="form" [formGroup]="filterForm">
  <fieldset class="form__options">
      <legend class="form__question">Channel</legend>
      <p class="form__answer" *ngFor="let item of options; let i=index;">
        <input type="radio" id="ct{{item.key}}" value="{{item.key}}" formControlName="channel" hidden>
        <label for="" tappable (click)="onChecked('channel', item.key)">
          <title>{{item.name}}</title>
          {{item.name}}
        </label>
      </p>
    </fieldset>
</form>

radio-button.scss

.form {
    margin-top: 16px;
    margin-bottom: 50px;
    &__options {
      margin-bottom: 16px;
      border: none;
    }
    &__question {
      font-weight: 600;
      font-size: 15px;
      letter-spacing: 0.46px;
      margin-bottom: 8px;
    }
    &__answer {
      display: inline-block;
      min-width: 80px;
      text-align: center;
      font-size: 15px;
      margin: 0;
      margin-right: 16px;
      input:checked ~ label {
        border: color($colors, primary) 1px solid;
        color: #f56e32;
        background-color: #fff6ee;
      }
      label {
        padding: 12px 16px;
        background: #f3f3f3;
        border-radius: 4px;
        text-align: center;
        font-size: 13px;
        color: #000000;
        letter-spacing: 0.4px;
        width: 100%;
        display: block;
        border: transparent 1px solid;
        margin-bottom: 10px;
        margin-right: 10px;
      }
    }
  }

radio-button.ts

// ...
onChecked(type, value) {
    this.filterForm.get(type).setValue(value);
  }
  
 //...