<svg xmlns="http://www.w3.org/2000/svg" display="none" width="0" height="0" role="none" tabindex="-1">
<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"></path>
</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"></path>
</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"></path>
</symbol>
</svg>
<div class="button">
<div class="middle"></div>
<div class="left">
<div class="background"></div>
<div class="content">
<svg width="20" height="20">
<use href="#tennisball"/>
</svg>
<div class="text">11</div>
</div>
</div>
<div class="left-cover">
<div class="background"></div>
<div class="content-tick">
<svg width="20" height="20">
<use href="#tick"/>
</svg>
</div>
</div>
<div class="right">
<div class="background"></div>
<div class="content">
<svg width="20" height="20">
<use href="#basketball"/>
</svg>
<div class="text">5.5</div>
</div>
</div>
<div class="right-cover">
<div class="background"></div>
<div class="content-tick">
<svg width="20" height="20">
<use href="#tick"/>
</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 width="20" height="20">
<use href="#tennisball"/>
</svg>
<div class="text">11</div>
</div>
</div>
<div class="left-cover">
<div class="background"></div>
<div class="content-tick">
<svg width="20" height="20">
<use href="#tick"/>
</svg>
</div>
</div>
<div class="right">
<div class="background"></div>
<div class="content">
<svg width="20" height="20">
<use href="#basketball"/>
</svg>
<div class="text">5.5</div>
</div>
</div>
<div class="right-cover">
<div class="background"></div>
<div class="content-tick">
<svg width="20" height="20">
<use href="#tick"/>
</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 width="20" height="20">
<use href="#tennisball"/>
</svg>
<div class="text">11</div>
</div>
</div>
<div class="left-cover">
<div class="background"></div>
<div class="content-tick">
<svg width="20" height="20">
<use href="#tick"/>
</svg>
</div>
</div>
<div class="right">
<div class="background"></div>
<div class="content">
<svg width="20" height="20">
<use href="#basketball"/>
</svg>
<div class="text">5.5</div>
</div>
</div>
<div class="right-cover">
<div class="background"></div>
<div class="content-tick">
<svg width="20" height="20">
<use href="#tick"/>
</svg>
</div>
</div>
</div><a target="_blank" href="https://codepen.io/z-/pen/bvpprw/">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;
.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");
}
});
