Turn Radio options into buttons

SuiteUpstairs · November 2, 2021, 7:04pm

There was a little mistake in my code that broke this trick but it has been updated now, sorry for the inconvenience Code has been updated
Hey Everybody, I have been messing around with the look of the radio buttons and have successfully turned them into actual buttons.

Here is the updated CSS code:

   .t-form-radio {
    margin: 10px;
  }
  
  .t-form-radio input {
    opacity: 0;
    position: fixed;
    width: 0;
  }
  
  .tb-radio {
      display: inline-block;
      background-color: #ddd;
      padding: 10px 20px;
      font-family: sans-serif, Arial;
      font-size: 16px;
      border: 2px solid #444;
      border-radius: 4px;
  }
  
  .tb-radio:hover {
    background-color: #000;
    color: #fff;
    
  }
  
 .tb-radio.selected {
      background-color: orange;
  }

Here is an example: