How to style a rounded bullet-like checkbox for options buttons
This tutorial takes you step by step on how to create rounded checkboxes for options buttons with styling similar to the one shown in the following image:
- 1.In the “Edit” sub-menu open the “Designer” card.
- 2.Select the Options buttons component you want to style.
- 3.Click "+ Sub-Elements".
- 4.Change the “Element” you want to style from “whole thing” to “Checkbox”.
- 1.In the “Border” tab:a. Give a value to the border property e.g.
1px solid blackb. Set a border radius e.g.
- 2.In the “Size” tab, give the checkbox a matching width and height e.g.
- 1.In the “Font” tab (the tick is styled as a font), set the
transparentto make it not visible.
- 2.Click “+ Filter” to be able to filter by selected state styling. Change the "When" option to “Selected” to style the checkbox selected state.
- 3.In the “Background” tab, give the checkbox a background color.
- 4.In the “Border” tab, set an inner box shadow to separate the background color from the checkbox border e.g.
inset 0px 0px 0px 3.5px #fff
That’s it! You can now play with styling to get it exactly as you want it to be!.