close

.HTML5

Google IO styled toggle button

Free

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 Mat... Read More

Demo
v0.1
08 May, 2018
Released
6 months ago
Updated
10+
Downloads

Description

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.

Basic Structure

We used checkbox and 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

And the CSS

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.

Comments

Login to leave a comment 💬

Subscribe to our news letter

and get updates and coupon codes for our products


Copyright © 2018, UICardio