This Multi State button is perfect to toggle through a limited set of modes as needs little space and avoids distracting popups or panels. The satisfying toggle is quite addictive.
All you need is a handful of div elements and include a tiny but of javascript and CSS in your project.
You can style this any way you want. The control is fully responsive.
Although there are 4 sides to this 3D control, you can have as few or as many options as you want.
Even the color shade changes as the light angle changes on the surfaces.
Even though it looks like a cube, there are only ever two div's being animated. No point to mess around with elements you can't see.
optional element attributes:
direction - defines rotation direction "up", "down,""left" or "right"
shading - defines in % how much % the base color is made lighter and darker as the cube rotates (Default is 60%)
time - time it takes for a 90 degree turn. Expressed in ms. Default is 300ms.
Top comments (0)