Style and Appearance in Blazor Button Group

27 Aug 20261 minute to read

The appearance of the Blazor Button Group can be modified by overriding the default CSS of the Blazor Button Group component. The following table lists the CSS classes that can be overridden and the corresponding element or state they target. A custom theme for the controls can also be created using the Theme Studio.

CSS Class Purpose of Class
.e-btn To customize the buttons inside the Blazor Button Group.
.e-btn:hover To customize the buttons inside the Blazor Button Group on hover.
.e-btn:focus To customize the buttons inside the Blazor Button Group on focus.
.e-btn:active To customize the buttons inside the Blazor Button Group on active (pressed).

Applying custom styles

The following example demonstrates a global stylesheet override that changes the background color of the buttons on hover.

@using Syncfusion.Blazor.SplitButtons

<SfButtonGroup>
    <ButtonGroupButton>View</ButtonGroupButton>
    <ButtonGroupButton>Edit</ButtonGroupButton>
    <ButtonGroupButton>Delete</ButtonGroupButton>
</SfButtonGroup>

<style>
    .e-btn-group .e-btn:hover {
        background-color: #ffaa00;
        color: #ffffff;
    }
</style>

See also