<svg width="0" height="0" display="none" xmlns="http://www.w3.org/2000/svg">
   <symbol id="tennisball" viewBox="0 0 496 512">
      <path d="M248 8C111.2 8 0 119.2 0 256s111.2 248 248 248 248-111.2 248-248S384.8 8 248 8zM103.5 416.1c16.7-17.4 30.6-37.2 41.3-59.1L118 344c-9.1 18.8-21.8 35.1-36 50-85.6-102.8-45.3-221.5 0-276 14.2 14.9 26.8 31.2 36 49.8l26.8-13.1c-10.6-21.8-24.5-41.5-41.2-58.9 79.1-71.4 203.1-77.6 289-.1-16.7 17.4-30.6 37.1-41.2 59l26.8 13c9.1-18.7 21.7-35 36-50 78.1 93.7 54.6 210.4.1 275.9-14.3-14.9-26.9-31.2-36-49.9l-26.8 13.1c10.7 21.9 24.5 41.6 41.3 58.9-90 81.5-214.3 68.2-289.3.4zm53.2-88.6l-28.3-9.2c12.2-37.5 14-81.5-.1-124.7l28.3-9.2c16.3 50 14 100.4.1 143.1zm211-9.2l-28.3 9.2c-16.3-50-14-100.5-.1-143.1l28.3 9.2c-12.2 37.6-13.9 81.6.1 124.7z"/>
   </symbol>
   <symbol id="basketball" viewBox="0 0 496 512">
      <path d="M423.4 80.6c-96.7-96.7-254.2-96.7-350.9 0s-96.7 254.2 0 350.9c96.8 96.8 254.2 96.7 350.9 0 96.8-96.8 96.8-254.2 0-350.9zM241.2 471.7c-48-1.5-95.6-18.9-134.1-52.1l140.9-141 56.8 56.8c-33.9 38.3-56 85.7-63.6 136.3zm86.7-113.2l61 61c-33.3 28.7-73.2 45.6-114.4 50.6 7.4-41.3 25.8-79.8 53.4-111.6zm22.6-22.6c31.8-27.6 70.3-46 111.6-53.3-5.1 41.2-21.9 81.1-50.6 114.4l-61-61.1zm113.2-86.7c-50.6 7.6-98 29.7-136.3 63.5L270.6 256l140.9-140.9c33.3 38.5 50.7 86.1 52.2 134.1zm-315-69.9c-32.6 28.4-72.6 47.2-115.4 54.1 4.4-42.6 21.6-84 51.2-118.3l64.2 64.2zm-41.6-86.9c34.3-29.6 75.7-46.7 118.3-51.2-6.9 42.8-25.7 82.8-54.1 115.4l-64.2-64.2zm150.6-51.9c47 2.1 93.4 19.4 131.2 52L248 233.4l-54.1-54.1c34.5-38.9 56.7-87.2 63.8-138.8zM32.5 265.7c51.6-7.2 99.9-29.4 138.8-63.8l54.1 54.1-141 140.9c-32.5-37.8-49.8-84.1-51.9-131.2z"/>
   </symbol>
   <symbol id="tick" viewBox="0 0 512 512">
      <path d="M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z"/>
   </symbol>
</svg>

<div class="button">
   <div class="middle"></div>
   <div class="left">
      <div class="background"></div>
      <div class="content">
         <svg>
            <use href="#tennisball"></use>
         </svg>
         <div class="text">11</div>
      </div>
   </div>
   <div class="left-cover">
      <div class="background"></div>
      <div class="content-tick">
         <svg>
            <use href="#tick"></use>
         </svg>
      </div>
   </div>
   <div class="right">
      <div class="background"></div>
      <div class="content">
         <svg>
            <use href="#basketball"></use>
         </svg>
         <div class="text">5.5</div>
      </div>
   </div>
   <div class="right-cover">
      <div class="background"></div>
      <div class="content-tick">
         <svg>
            <use href="#tick"></use>
         </svg>
      </div>
   </div>
</div>

<div class="button" style="height:100px">
   <div class="middle"></div>
   <div class="left">
      <div class="background"></div>
      <div class="content">
         <svg>
            <use href="#tennisball"></use>
         </svg>
         <div class="text">11</div>
      </div>
   </div>
   <div class="left-cover">
      <div class="background"></div>
      <div class="content-tick">
         <svg>
            <use href="#tick"></use>
         </svg>
      </div>
   </div>
   <div class="right">
      <div class="background"></div>
      <div class="content">
         <svg>
            <use href="#basketball"></use>
         </svg>
         <div class="text">5.5</div>
      </div>
   </div>
   <div class="right-cover">
      <div class="background"></div>
      <div class="content-tick">
         <svg>
            <use href="#tick"></use>
         </svg>
      </div>
   </div>
</div>

<div class="button big" style="height:300px">
   <div class="middle"></div>
   <div class="left">
      <div class="background"></div>
      <div class="content">
         <svg>
            <use href="#tennisball"></use>
         </svg>
         <div class="text">11</div>
      </div>
   </div>
   <div class="left-cover">
      <div class="background"></div>
      <div class="content-tick">
         <svg>
            <use href="#tick"></use>
         </svg>
      </div>
   </div>
   <div class="right">
      <div class="background"></div>
      <div class="content">
         <svg>
            <use href="#basketball"></use>
         </svg>
         <div class="text">5.5</div>
      </div>
   </div>
   <div class="right-cover">
      <div class="background"></div>
      <div class="content-tick">
         <svg>
            <use href="#tick"></use>
         </svg>
      </div>
   </div>
</div>

<a href="https://codepen.io/z-/pen/bvpprw/" target="_blank">Version 1 - see the original smaller version</a>
body {
   background-color:#4D4250;
   height:100vh;
   margin:0;
   display:flex;
   flex-direction:row;
   justify-content:space-around;
   align-items:center;
   a {
      color:#fff;
      font-family: 'Montserrat', sans-serif;
      position: fixed;
      bottom:10px;
      right:10px;
   }
   .button {
      position: relative;
      font-family: 'Montserrat', sans-serif;
      color:#fff;
      svg {
         fill:#fff;
      }
      width:150px;
      height:70px;
      background-color:#5E5461;
      border-radius:4px;
      overflow:hidden;
      .middle {
         z-index:10;
         background-color:#4D4250;
         box-shadow:0 0 0.1px 0 #4D4250;
         position: absolute;
         top:50%;
         left:50%;
         transform:translate(-50%, -50%) rotate(30deg);
         width:2px;
         min-height:100px;
         height:120%;
      }
      .left, .right, .left-cover, .right-cover {
         position: absolute;
         .background {
            z-index:2;
            position: absolute;
         }
         .content {
            pointer-events:none;
            z-index:3;
            position: absolute;
            height:calc(100% - 20px);
            max-height:50px;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            svg {
               width:20px;
               height:20px;
               fill:white;
            }
            .text {
               font-size:1.2em;
            }
         }
      }
      .left, .right-cover {
         .background {
            background-color:#2ECC71;
         }
         .content {
            top:10px;
            left:10px;
            align-items:flex-start;
            svg {
               order:1;
            }
            .text {
               order:2
            }
         }
      }
      .left {
         .background {
            cursor: pointer;
            &:hover {
               background-color:#2ABA66;
            }
         }
      }
      .right, .left-cover {
         .background {
            background-color:#5D9CEC;
         }
         .content {
            bottom:10px;
            right:10px;
            align-items:flex-end;
            svg {
               order:2;
            }
            .text {
               order:1;
            }
         }
      }
      .right {
         .background {
            cursor: pointer;
            &:hover {
               background-color:#4A89DC;
            }
         }
      }
      .left-cover, .right-cover {
         transition:.25s ease;
      }
      &:not(.big) {
         .left, .right, .left-cover, .right-cover {
            top:0px;
            bottom:0px;
            width:50%;
            .background {
               top:0px;
               bottom:0px;
               width:200%;
               transform:skewX(-30deg);
            }
         }
         .left, .right-cover {
            left:0px;
            .background {
               right:0px;
               bottom:0px;
            }
         }
         .right, .left-cover {
            right:0px;
            .background {
               left:0px;
               top:0px;
               bottom:0px;
            }
         }
         .left-cover {
            transform:translateX(150%);
         }
         .right-cover {
            transform:translateX(-150%);
         }
         
         &.selected-left {
            .left {
               z-index:5;
            }
            .left-cover {
               transform:translateX(0%);
            }
         }
         &.selected-right {
            .right {
               z-index:5;
            }
            .right-cover {
               transform:translateX(0%);
            }
         }
      }
      &.big {
         .middle {
            transform:translate(-50%, -50%) rotate(60deg);
         }
         .left, .right, .left-cover, .right-cover {
            left:0px;
            right:0px;
            height:50%;
            .background {
               left:0px;
               right:0px;
               height:200%;
               transform:skewY(-30deg);
            }
         }
         .left, .right-cover {
            top:0px;
            .background {
               bottom:0px;
            }
         }
         .right, .left-cover {
            bottom:0px;
            .background {
               top:0px;
            }
         }
         .left-cover {
            transform:translateY(150%);
         }
         .right-cover {
            transform:translateY(-150%);
         }
         &.selected-left {
            .left {
               z-index:5;
            }
            .left-cover {
               transform:translateY(0%);
            }
         }
         &.selected-right {
            .right {
               z-index:5;
            }
            .right-cover {
               transform:translateY(0%);
            }
         }
      }
      .left-cover, .right-cover {
         z-index:4;
         .content-tick {
            svg {
               z-index:5;
               height:50%;
               width:50%;
               position: absolute;
               top:50%;
               left:50%;
               transform:translate(-50%,-50%);
            }
         }
      }
      .left-cover {
         .background {
            background-color:#2ABA66;
         }
      }
      .right-cover {
         .background {
            background-color:#4A89DC;
         }
      }
   }
}
View Compiled
$(".left .background").click(function() {
   if(!$(this).parent().parent().hasClass("selected-right")) {
      $(this).parent().parent().toggleClass("selected-left");
   }
});
$(".right .background").click(function() {
   if(!$(this).parent().parent().hasClass("selected-left")) {
      $(this).parent().parent().toggleClass("selected-right");
   }
});
Run Pen

External CSS

  1. https://fonts.googleapis.com/css?family=Montserrat

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js