<div class="group">
  <h2>Checkbox:</h2>
  <input type="checkbox" name="cb" id="cb1" />
  <label for="cb1">Check this</label>
  <input type="checkbox" name="cb" id="cb2" />
  <label for="cb2">... and this...</label>
  <input type="checkbox" name="cb" id="cb3" />
  <label for="cb3">and maybe this</label>
</div>
<div class="group">
  <h2>Radio:</h2>
  <input type="radio" name="rb" id="rb1" />
  <label for="rb1">Check this</label>
  <input type="radio" name="rb" id="rb2" />
  <label for="rb2">... or this...</label>
  <input type="radio" name="rb" id="rb3" />
  <label for="rb3">or maybe this</label>
</div>

:root {
  --primary: #ffc107;
  --secondary: #673ab7;
}
*, *::before, *::after {
  box-sizing: border-box;
}
body {
  display: grid;
  place-content: center;
  min-height: 100vh;
  margin: 0;
  color: var(--primary);
  background: var(--secondary);
}
/* Hide inputs */
input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.group {
  display: flex;
  align-items: center;
}
/* Styles */
label {
  display: flex;
  align-items: center;
  margin-left: 1rem;
  padding: 1rem 1rem 1rem 2rem;
  position: relative;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.25, 0.25, 0.5, 1.9);
  &::before {
    content: "";
    position: absolute;
    left: 0;
    width: 1.5rem;
    height: 1.5rem;
    background: transparent;
    border: 2px solid;
    border-radius: 0.25rem;
    z-index: -1;
    transition: all 0.25s cubic-bezier(0.25, 0.25, 0.5, 1.9);
    input[type="radio"] + & {
      border-radius: 2rem;
    }
  }
}
/* Checked */
input:checked + label {
  padding-left: 1em;
  color: var(--secondary);
  &::before {
    width: 100%;
    height: 100%;
    background: var(--primary);
    border: 0;
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
  }
}

// Pure CSS Checkbox/Radio, Fancy style.