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:
Last updated
In the “Edit” sub-menu open the “Designer” card.
Select the Options buttons component you want to style.
Click "+ Sub-Elements".
Change the “Element” you want to style from “whole thing” to “Checkbox”.
In the “Border” tab:
a. Give a value to the border property e.g. 1px solid black
b. Set a border radius e.g. 25px
In the “Size” tab, give the checkbox a matching width and height e.g. 25px
In the “Font” tab (the tick is styled as a font), set the font-size to 0px or color: transparent to make it not visible.
Click “+ Filter” to be able to filter by selected state styling. Change the "When" option to “Selected” to style the checkbox selected state.
In the “Background” tab, give the checkbox a background color.
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!.
