{"id":14768,"date":"2026-02-03T11:22:36","date_gmt":"2026-02-03T11:22:36","guid":{"rendered":"https:\/\/docs.cmsmasters.net\/?p=14768"},"modified":"2026-02-04T10:25:49","modified_gmt":"2026-02-04T10:25:49","slug":"split-button-widget","status":"publish","type":"post","link":"https:\/\/docs.cmsmasters.net\/split-button-widget\/","title":{"rendered":"Split Button Widget"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t<\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/svg>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Split Button Widget<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Use the Split Button widget to add interactivity to your buttons.<\/p><\/div><\/div><\/div><\/div><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t<\/i>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Content<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"split\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"split\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Button<\/strong><\/p>

Text: <\/strong>Add the Button Text here.<\/p>

Link: <\/strong>Add the Button Link here.<\/p>

Alignment:<\/strong> Choose between Left, Center or Right Button Alignment for widescreen, desktop, tablet portrait and mobile portrait modes.<\/p>

Animation:<\/strong> Choose an animation type: Slide, Rotate, or None.<\/p>

When the Slide animation type<\/em><\/strong> is selected, you can choose the desired Angle <\/strong>from the dropdown.<\/p>

Animation Duration: <\/strong>Set the animation duration in milliseconds for widescreen, desktop, tablet portrait and mobile portrait modes.<\/p>

Icon<\/strong><\/p>

Normal: <\/strong>Select the Icon to be displayed in the normal state.<\/p>

Rotate:<\/strong> Select the rotation direction for the icon for widescreen, desktop, tablet portrait and mobile portrait modes.<\/p>

Hover: <\/strong>Select the Icon to be displayed in the hover state.<\/p>

Rotate:<\/strong> Select the rotation direction for the icon for widescreen, desktop, tablet portrait and mobile portrait modes.<\/p>

Position:<\/strong> Choose between Before and After icon position.<\/p>

Hide On: <\/strong>Choose the resolutions below which the icon should be hidden.<\/p>

Button ID:<\/strong> Set the Button ID here.<\/p>

Please make sure the ID is unique and not used elsewhere on the page this form is displayed.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t<\/i>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Style<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Label<\/strong><\/p>

Typography:<\/strong>\u00a0Set a Typography using settings from the dropdown.<\/p>

Color:<\/strong> Set the label color for Normal and Hover modes.<\/p>

Background Type:<\/strong>\u00a0Choose between Classic and Gradient background types for both Normal and Hover modes and configure them accordingly.<\/p>

Background Color:<\/strong> Choose the label background color.<\/p>

Border Color:<\/strong>\u00a0Set border color for Normal and Hover modes.<\/p>

Border Radius:<\/strong> Set a border radius to the label.<\/p>

Text Shadow<\/b>: Select desired settings from the dropdown.<\/p>

Padding:<\/strong>\u00a0Set paddings for widescreen, desktop, tablet portrait and mobile portrait modes.<\/p>

Border Type:<\/strong>\u00a0Choose desired Border Type from the dropdown and set it.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"split\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Icon<\/strong><\/p>

Gap:<\/strong> Set a gap between button and icon for widescreen, desktop, tablet portrait and mobile portrait modes.<\/p>

Size:<\/strong> Set the icon size for widescreen, desktop, tablet portrait and mobile portrait modes (for Normal and Hover states).<\/p>

Color:<\/strong> Set the icon color for Normal and Hover modes.<\/p>

Background Type:<\/strong> Choose between Classic and Gradient background types for both Normal and Hover modes and configure them accordingly.<\/p>

Background Color:<\/strong>\u00a0Choose the icon background color.<\/p>

Border Color:<\/strong>\u00a0Set border color for Normal and Hover modes.<\/p>

Border Radius:<\/strong>\u00a0Set a border radius to the icon.<\/p>

Border Type:<\/strong>\u00a0Choose desired Border Type from the dropdown and set it.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t<\/i>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Advanced<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Set the Advanced options<\/a> that are applicable to this widget<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

Use the Split Button widget to add interactivity to your buttons. Content Button Text: Add the Button Text here. Link: Add the Button Link here. Alignment: Choose between Left, Center or Right Button Alignment for widescreen, desktop, tablet portrait and mobile portrait modes. Animation: Choose an animation type: Slide, Rotate, or None. When the Slide…<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[110,118],"tags":[7],"class_list":["post-14768","post","type-post","status-publish","format-standard","hentry","category-widgets","category-content","tag-widget"],"_links":{"self":[{"href":"https:\/\/docs.cmsmasters.net\/wp-json\/wp\/v2\/posts\/14768","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.cmsmasters.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.cmsmasters.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.cmsmasters.net\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.cmsmasters.net\/wp-json\/wp\/v2\/comments?post=14768"}],"version-history":[{"count":19,"href":"https:\/\/docs.cmsmasters.net\/wp-json\/wp\/v2\/posts\/14768\/revisions"}],"predecessor-version":[{"id":14794,"href":"https:\/\/docs.cmsmasters.net\/wp-json\/wp\/v2\/posts\/14768\/revisions\/14794"}],"wp:attachment":[{"href":"https:\/\/docs.cmsmasters.net\/wp-json\/wp\/v2\/media?parent=14768"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.cmsmasters.net\/wp-json\/wp\/v2\/categories?post=14768"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.cmsmasters.net\/wp-json\/wp\/v2\/tags?post=14768"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}