Every year Google comes up with new and exciting products and software updates, with every software update they bring some cool changes to their design. This year they are introducing refreshed Material Design. They also brought this beautiful toggle buttons. We tried to do some experiment and re-create them (this is not the exact way Google used to make them) with a different approach.
label trick to make this toggle button and made the checkbox hidden. Added one
span element to show the circular color which expands in the background when the checkbox is checked.
Don't forget to add
for attribute in label element because without that we cannot check the checkbox
With CSS we expand the circle or dot when the checkbox is checked
It's quite simple, isn't it? Download the source code to get the full detailed code and we're waiting for your experiments.
and get updates and coupon codes for our products