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 shade changes as the light angle changes on the surfaces. I can't wait to see what a more artistic designer can do with these.
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: list - References the ID of a datalist 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)