Experiment 5

by lasha

HTML

<div class="container">
  
  <!-- radio can be set checked by default -->
  <input type="radio" name="aBtn" class="btn-input" id="btn1">
  <input type="radio" name="aBtn" class="btn-input" id="btn2">
  <input type="radio" name="aBtn" class="btn-input" id="btn3">
  <label for="btn1" class="btn btn-1">Button 1</label>
  <label for="btn2" class="btn btn-2">Button 2</label>
  <label for="btn3" class="btn btn-3">Button 3</label>
  
  <div class="container-bg"></div>
</div>

SCSS

.container {
  position: relative;
  width: 95%;
  height: 300px;
  margin: 0 auto;
  border: 1px solid #ccc;
  text-align: center;
  
  .btn-input {
    display: none;
  }
  
  .btn {
    position: relative;
    z-index: 1;
    display: inline-block;
    height: 150px; width: 150px;
    margin: 0 10px;
    line-height: 150px;
    border: 1px solid #555;
    border-radius: 100%;
    top: 50%;
    transform: translateY(-50%);
  }
  .btn-1:hover, #btn1:checked {
    ~ .btn-1 {
      background-color: #fff;
    }
    ~ .container-bg {
      background-color: #588C7E;
    }
  }
  .btn-2:hover, #btn2:checked {
    ~ .btn-2 {
      background-color: #fff;
    }
    ~ .container-bg {
      background-color: #F2E394;
    }
  }
  .btn-3:hover, #btn3:checked {
    ~ .btn-3 {
      background-color: #fff;
    }
    ~ .container-bg {
      background-color: #F2AE72;
    }
  }
  
  .container-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    background-color: #ececec;
  }
}