Here is my personalized interpretation of the elegant CSS solution JS Fiddle example shared earlier.

http://jsfiddle.net/496c9/

HTML

<div id="donate">
    <label class="blue"><input type="radio" name="toggle"><span>$20</span></label>
    <label class="green"><input type="radio" name="toggle"><span>$50</span></label>
    <label class="yellow"><input type="radio" name="toggle"><span>$100</span></label>
    <label class="pink"><input type="radio" name="toggle"><span>$500</span></label>
    <label class="purple"><input type="radio" name="toggle"><span>$1000</span></label>
</div>

CSS

body {
    font-family:sans-serif;
}

#donate {
    margin:4px;

    float:left;
}

#donate label {
    float:left;
    width:170px;
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;

}

#donate label span {
    text-align:center;
    font-size: 32px;
    padding:13px 0px;
    display:block;
}

#donate label input {
    position:absolute;
    top:-20px;
}

#donate input:checked + span {
    background-color:#404040;
    color:#F7F7F7;
}

#donate .yellow {
    background-color:#FFCC00;
    color:#333;
}

#donate .blue {
    background-color:#00BFFF;
    color:#333;
}

#donate .pink {
    background-color:#FF99FF;
    color:#333;
}

#donate .green {
    background-color:#A3D900;
    color:#333;
}
#donate .purple {
    background-color:#B399FF;
    color:#333;
}

Customized with vibrant colored buttons :)

Unique CSS and HTML Solution with Smooth Animations and Checkbox Functionality!

Example Image (Feel free to test the code below):

https://i.sstatic.net/KAOEU.jpg

After searching for a clean and simple solution, I came across this code snippet that originally focused on checkboxes. With just one minor adjustment, I was able to apply the functionality to radio buttons as well.

The CSS (SCSS) credits go to @mallendeo (acknowledged in the JS credits), while my modification simply involved changing the input type to RADIO and assigning the same name to all radio switches. And voila! The automatic deactivation of one switch when another is activated worked seamlessly.

It's incredibly neat, and best of all, it adheres to your requirement of using only CSS and HTML!

This solution perfectly met my needs after struggling with numerous other options for three days, most of which either required jQuery, lacked label support, or weren't fully browser-compatible. This one ticks all the boxes!

I'm providing the code here for you to witness a live demo:

/** Toggle buttons
 * @mallendeo
 * forked @davidtaubmann
 * from https://codepen.io/mallendeo/pen/eLIiG
 */

(CSS code goes here)

<h2>Toggle 'em</h2>
<(HTML code goes here)>

If you execute the snippet, you'll notice that I have left the iOS radio button checked and disabled to demonstrate how it interacts when another radio button is selected. Additionally, I've included two labels per radio button for visual clarity. The original checkbox example code is also provided for comparison purposes.

Check out this solution that is compatible with all browsers, including IE7 and IE8 (although IE6 was not tested):

http://jsfiddle.net/RkvAP/230/

HTML

<div class="toggle">
    <label><input type="radio" name="toggle"><span>On</span></label>    
</div>
<div class="toggle">
    <label><input type="radio" name="toggle"><span>Off</span></label>
</div>

JS

$('label').click(function(){
    $(this).children('span').addClass('input-checked');
    $(this).parent('.toggle').siblings('.toggle').children('label').children('span').removeClass('input-checked');
});

CSS

body {
    font-family:sans-serif;
}

.toggle {
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
}

.toggle label {
    float:left;
    width:2.0em;
}

.toggle label span {
    text-align:center;
    padding:3px 0px;
    display:block;
    cursor: pointer;
}

.toggle label input {
    position:absolute;
    top:-20px;
}

.toggle .input-checked /*, .bounds input:checked + span works for firefox and ie9 but breaks js for ie8(ONLY) */ {
    background-color:#404040;
    color:#F7F7F7;
}

This implementation uses minimal JS (jQuery, just two lines of code).

After being inspired by a solution provided by Michal B., I decided to implement it using bootstrap.

label.btn {
  padding: 0;
}

label.btn input {
  opacity: 0;
  position: absolute;
}

label.btn span {
  text-align: center;
  padding: 6px 12px;
  display: block;
}

label.btn input:checked+span {
  background-color: rgb(80, 110, 228);
  color: #fff;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div>
  <label class="btn btn-outline-primary"><input type="radio" name="toggle"><span>One</span></label>
  <label class="btn btn-outline-primary"><input type="radio" name="toggle"><span>Two</span></label>
  <label class="btn btn-outline-primary"><input type="radio" name="toggle"><span>Three</span></label>
</div>

My typical method involves concealing the actual radio buttons using CSS (or converting them into hidden inputs), inserting the visuals I desire (such as through an unordered list with styling applied to the li element), and utilizing click events to switch between inputs. This technique allows for accessibility on alternative platforms, as you can initially hide the ul and display the radio buttons for users not using a traditional web browser.

Although this question may be considered old, I recently tackled the same issue and wanted to share my approach. Being a fan of Bootstrap, I opted for utilizing its features in my solution.

HTML

<div class="col-xs-12">
    <div class="form-group">
        <asp:HiddenField ID="hidType" runat="server" />
        <div class="btn-group" role="group" aria-label="Selection type" id="divType">
            <button type="button" class="btn btn-default BtnType" data-value="1">Food</button>                        
            <button type="button" class="btn btn-default BtnType" data-value="2">Drink</button>
        </div>
    </div>
</div>

jQuery

$(document).ready(function () {
    $('#divType button').click(function () {
        $(this).addClass('active').siblings().removeClass('active');
        $('#<%= hidType.ClientID%>').val($(this).data('value'));
        //alert($(this).data('value'));             
    });
});

To easily access the value on the server-side, I decided to store it in a hidden field within the form.