<h1>Boutons Radio</h1>
<div class="content">
  <div>
    <h2>Radio 1</h3>
    <!-- Code des boutons de la démo 1 -->
    <div>
      <input type="radio" name="demo1" class="demo1" id="demo1-a" checked>
      <label for="demo1-a">Oui</label>
      <input type="radio" name="demo1" class="demo1" id="demo1-b" >
      <label for="demo1-b">Non</label>
      <input type="radio" name="demo1" class="demo1" id="demo1-c" >
      <label for="demo1-c">Pourquoi pas</label>
    </div>
  </div>
  
  <div>
    <h2>Radio 2</h3>
    <!-- Code des boutons de la démo 2 -->
    <div>
      <input type="radio" name="demo2" class="demo2 demoyes" id="demo2-a" checked>
      <label for="demo2-a">Oui</label>
      <input type="radio" name="demo2" class="demo2 demono" id="demo2-b" >
      <label for="demo2-b">Non</label>
    </div>
  </div>
  
  <div>
    <h2>Radio 3</h3>
    <!-- Code des boutons de la démo 3 -->
    <div>
      <input type="radio" name="demo3" class="demo3 demoyes" id="demo3-a" checked>
      <label for="demo3-a">Oui</label>
      <input type="radio" name="demo3" class="demo3 demono" id="demo3-b" >
      <label for="demo3-b">Non</label>
    </div>
  </div>
    
  <div>
    <h2>Radio 4</h2>
    <!-- Code des boutons de la démo 4 -->
    <div>
      <input type="radio" name="demo4" class="demo4 demohappy" id="demo4-a" checked>
      <label for="demo4-a">Oui</label>
      <input type="radio" name="demo4" class="demo4 demosad" id="demo4-b" >
      <label for="demo4-b">Non</label>
    </div>
  </div>
  
  <div>
    <h2>Radio 5</h2>
    <!-- Code des boutons de la démo 5 -->
    <div>
      <input type="radio" name="demo5" class="demo5" id="demo5-a" checked>
      <label for="demo5-a">Oui</label>
      <input type="radio" name="demo5" class="demo5" id="demo5-b" >
      <label for="demo5-b">Non</label>
    </div>
  </div>
  
  <div>
    <h2>Radio 6</h2>
    <!-- Code des boutons de la démo 6 -->
    <div>
      <input type="radio" name="demo6" class="demo6" id="demo6-a" checked>
      <label for="demo6-a">Oui</label>
      <input type="radio" name="demo6" class="demo6" id="demo6-b" >
      <label for="demo6-b">Non</label>
    </div>
  </div>
</div>
@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
:root {
  --txt-color: #00B7E8;
}
body {
  margin: 2rem;
  font-family: Roboto, sans-serif;
}
.content {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: flex-start ;
}
.content > div {
  flex-basis: 200px;
  border:  1px solid #ccc;
  padding: 1rem;
  box-shadow: 0px 1px 1px rgba(0,0,0,0.2), 0px 1px 1px rgba(0,0,0,0.2);
}
h1{
  font-weight: normal;
  color: var(--txt-color);
}
h2 {
  font-size: 1.1rem;
  color: var(--txt-color);
  font-weight: normal;
  text-transform: uppercase;
  margin:0 0 2rem;
  border-bottom: 1px solid #ccc;
}

/********************************************
 * Démo 1 
 *******************************************/
input[type="radio"].demo1 {
  display: none;
}
input[type="radio"].demo1:checked + label {
  border: 1px solid #000;
}

/********************************************
 * Démo 2 
 *******************************************/
input[type="radio"].demo2 {
  display: none;
}
input[type="radio"].demo2 + label {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
  color: #fff;
  background-color: #6c757d;
  border: 1px solid transparent;
  transition: all 0.15s ease-in-out;
}
input[type="radio"].demo2.demoyes:hover + label {
  background-color: #218838;
  border-color: #1e7e34;
}
input[type="radio"].demo2.demoyes:checked + label {
  background-color: #28a745;
  border-color: #28a745;
}
input[type="radio"].demo2.demono:hover + label {
  background-color: #c82333;
  border-color: #bd2130;
}
input[type="radio"].demo2.demono:checked + label {
  background-color: #dc3545;
  border-color: #dc3545;
}

/********************************************
 * Démo 3
 *******************************************/
input[type="radio"].demo3 {
  display: none;
}
input[type="radio"].demo3 + label {
  display: inline-block;
  border: 1px solid #000;
  padding: 0.5rem 1rem;
  min-width:50px;
  text-align:center;
}
input[type="radio"].demo3:checked + label {
  display:none;
}

/********************************************
 * Démo 4
 *******************************************/
input[type="radio"].demo4 {
  display: none;
}
input[type="radio"].demo4 + label::before {
  font-family: "Font Awesome 5 Free";
  font-size: 1.2em;  
  color: #ccc ;
  margin: 0 0.5rem ;
}
input[type="radio"].demo4:checked + label::before {
  color: #000 ;
}
input[type="radio"].demo4.demohappy + label::before {
  content: '\f118';
}
input[type="radio"].demo4.demosad + label::before {
  content: '\f119';
}

/********************************************
 * Démo 5
 *******************************************/
input[type="radio"].demo5 {
  display: none;
}
input[type="radio"].demo5 + label {
  position: relative;
  padding-left: 1.3rem;
}
input[type="radio"].demo5 + label::before,
input[type="radio"].demo5 + label::after {
  display: block;
  position: absolute;
  box-sizing: border-box;
  bottom: 0;
  left: 0;
  content:'';
  width: 1rem;
  height: 1rem; 
  border-radius: 1rem;
}
input[type="radio"].demo5 + label::before {
  border: 1px solid #00B7E8;
  background-color: #eee;
  
}
input[type="radio"].demo5:checked + label::after {
  background-color: #00B7E8;
}

/********************************************
 * Démo 5
 *******************************************/
input[type="radio"].demo6 {
  display: none;
}
input[type="radio"].demo6 + label {
  position: relative;
  padding-left: 1.3rem;
}
input[type="radio"].demo6 + label::before,
input[type="radio"].demo6 + label::after {
  display: block;
  position: absolute;
  box-sizing: border-box;
  content:'';
  border-radius: 1rem;
}
input[type="radio"].demo6 + label::before {
  bottom: 0;
  left: 0;
  border: 1px solid #ccc;
  background-color: #eee;
  width: 1rem;
  height: 1rem; 
}
input[type="radio"].demo6 + label::after {
  bottom: 3px;
  left: 3px;
  width: calc(1rem - 6px);
  height: calc(1rem - 6px);
}
input[type="radio"].demo6:checked + label::after {
  background-color: #00B7E8;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.