Style and Appearance in Blazor Button

27 Aug 20261 minute to read

To modify the Blazor Button appearance, you need to override the default CSS of the Button component. The following table lists the available CSS classes and their corresponding section in the Button component. You can also create your own custom theme for the controls using the Theme Studio.

CSS Class Purpose of Class
.e-btn To customize the Blazor Button.
.e-btn:hover To customize the Blazor Button on hover.
.e-btn:focus To customize the Blazor Button on focus.
.e-btn:active To customize the Blazor Button on active.
.e-btn:disabled To customize the Blazor Button in the disabled state.

Customizing the appearance of Blazor Button

Use the following CSS to customize the background color of the Blazor Button while clicking, hovering, and focusing.

@using Syncfusion.Blazor.Buttons

<SfButton>CUSTOM</SfButton>

<style>
    .e-btn {
        background-color: #ff6e40;
    }

    .e-btn:hover {
        background-color: #0b6a0b;
    }

    .e-btn:focus, .e-btn:active {
        background-color: #0078d4;
    }
</style>
Blazor Button with Style and Appearance

See also