Material-UI <Radio /> with a <Button />-like appearance

Have you looked into https://material-ui.com/components/toggle-button/ or https://material-ui.com/api/toggle-button-group/? I think it's a relatively new addition (i.e. didn't exist when you resolved this), but it might be helpful for anyone who finds this question later.

The ToggleButtonGroup will control the selected state of its child buttons when given its own value prop.

Here's the example given on that page:

      <ToggleButtonGroup
        value={alignment}
        exclusive
        onChange={handleAlignment}
        aria-label="text alignment"
      >
        <ToggleButton value="left" aria-label="left aligned">
          <FormatAlignLeftIcon />
        </ToggleButton>
        <ToggleButton value="center" aria-label="centered">
          <FormatAlignCenterIcon />
        </ToggleButton>
        <ToggleButton value="right" aria-label="right aligned">
          <FormatAlignRightIcon />
        </ToggleButton>
        <ToggleButton value="justify" aria-label="justified" disabled>
          <FormatAlignJustifyIcon />
        </ToggleButton>
      </ToggleButtonGroup>

This was you can make a radio button have a button like, i have created a pen for this please check https://codepen.io/praveen-rao-chavan/pen/JBpgLX

<section>
  <h1>Simple material design CSS only radio button example</h1>
  <div>
    <ul  class="donate-now">
    <li class="md-radio">
      <input id="1" type="radio" name="g" checked>
      <label for="1">Option 1</label>
    </li>
    <li class="md-radio">
      <input id="2" type="radio" name="g">
      <label for="2">Option 2</label>
    </li>
      </ul>
  </div>
</section>

CSS

@import url(https://fonts.googleapis.com/css?family=Roboto);

$md-radio-checked-color: rgb(51, 122, 183);
$md-radio-border-color: rgba(0, 0, 0, 0.54);
$md-radio-size: 20px;
$md-radio-checked-size: 10px; 
$md-radio-ripple-size: 15px;

@keyframes ripple {
  0% {
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.0);
  }
  50% { 
    box-shadow: 0px 0px 0px $md-radio-ripple-size rgba(0, 0, 0, 0.1);
  }
  100% {
    box-shadow: 0px 0px 0px $md-radio-ripple-size rgba(0, 0, 0, 0);
  }
}

.md-radio {
    margin: 16px 0;

    &.md-radio-inline {
        display: inline-block;
    }

    input[type="radio"] {
        display: none;
        &:checked + label:before {
            --border-color: $md-radio-checked-color;
            --animation: ripple 0.2s linear forwards;   
        }
        &:checked + label:after {
            --transform: scale(1);
        }
    }

    label {
        display: inline-block;
        height:$md-radio-size;
        position: relative;
        padding: 0 ($md-radio-size + 10px);
        margin-bottom: 0;
        cursor: pointer;
        vertical-align: bottom;
        &:before, &:after {
            position: absolute;            
            content: '';  
            border-radius: 50%;
            transition: all .3s ease;
            transition-property: transform, border-color;
        }
        &:before {
            left: 0;
            top: 0;
            width: $md-radio-size;
            height: $md-radio-size;
            border: 2px solid $md-radio-border-color;
        }
        &:after {
            top: $md-radio-size / 2 - $md-radio-checked-size / 2;
            left: $md-radio-size / 2 - $md-radio-checked-size / 2;
            width:$md-radio-checked-size;
            height:$md-radio-checked-size;
            transform: scale(0);
            background:$md-radio-checked-color;
        }
    }
}



// *************************************

// *************************************
*, *:before, *:after {
  box-sizing: border-box;
}

body {
  background:#f0f0f0;
  position: absolute;
  width:100%;
  padding:0;
  margin:0;
  font-family: "Roboto", sans-serif;
  color: #333;
}

section {
  background:white;
  margin:0 auto;
  padding: 4em;
  max-width: 800px;
  h1 {
    margin: 0 0 2em;
  }
}



.donate-now {
     list-style-type:none;
     margin:25px 0 0 0;
     padding:0;
}

.donate-now li {
     float:left;
     margin:0 5px 0 0;
    width:100px;
    height:40px;
    position:relative;
}

.donate-now label, .donate-now input {
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

.donate-now input[type="radio"] {
    opacity:0.011;
    z-index:100;
}

.donate-now input[type="radio"]:checked + label {
    background:yellow;
}

.donate-now label {
     padding:5px;
     border:1px solid #CCC; 
     cursor:pointer;
    z-index:90;
}

.donate-now label:hover {
     background:#DDD;
}

You can customize it to your styles.