Poker chip CSS only checkbox

For this Sunday Funday project, I decided to make a poker chip checkbox out of pure CSS.

DEMO

The idea is that it will flip on its right edge like when people flip chips between their fingers. This can be improved by using images to get a correct dashed edge or make it more lifelike but this is CSS only.

Tutorial

1. The markup

We need a container to set the background and the size and width, we need the label to be clickable anywhere, input for the checkbox, top and bottom of the chip.

<div class="container">
 <label for="chip-checkbox"></label>
 <input type="checkbox" name="chip" value="1" id="chip-checkbox">
 <div class="bottom-side"></div>
 <div class="top-side"></div>
</div>

2. Hide the input

input {
 visibility: hidden;
}

3. Set the width and height of the background/container

.container {
 width: 80px;
 height: 40px;
 border-radius: 50px;
 background-color: #18894B;
 position: relative;
        box-shadow: -3px 3px 1px 0px #3e3b3b6b;
}

4. Make the label fit the container
*we also need the z-index so we pick up all the clicks if you remove this you cannot click on the chips

label {
 z-index: 1;
 width: 80px;
 height: 40px;
 border-radius: 50px;
 position: absolute;
 left: 0px;
}

5. Create the chips
The chips will sit on top of each other so that when we animate it they will flip correctly.

Turns into this (blue is behind)

.bottom-side, .top-side {
 width: 22px;
 height: 22px;
 border-radius: 100%;
 position: absolute;
 top: 3px;
 left: 4px;
 display: block;
 margin: 0;
}

.bottom-side {
 background-color: white;
 border: 6px dashed #0D0088;
}

.top-side {
 background-color: white;
 border: 6px dashed #880000;
 backface-visibility: hidden;
}

6. Animation
The first thing we need to do is add some perspective to the container, this allows the CSS to animate in 3d.

.conatiner {
 perspective: 800px;
}

Then we need to add the transition properties to the chips. This sets the speed, the start (origin) point of the animation and tell it we are using 3d.

.bottom-side, .top-side {
 transition: all 1s ease;
 transform-origin: right;
 transform-style: preserve-3d;
}

Then we need to animate it when the input is checked. We move it to the position on the right using left 7px and rotate it to get the flip. Once its un-checked it will go back to the start position.
* the ~ selects all the divs next to the input.

.container input[type=checkbox]:checked ~ div {
 left: 7px;
 transform: rotateY( -180deg );
}

7. Final touches Once the animation is all set we just need to add the words to the chips these can be anything.

.top-side:after {
 content: "Out";
 position: absolute;
 top: 3px;
 left: 0px;
}

.bottom-side:after {
 content: "In";
   position: absolute;
 top: 3px;
 left: 5px;
 transform: rotateY( 180deg );
}

DEMO 
Thanks for reading folks!
 If you liked it feel free to leave a comment or a share, I would be most grateful.