ImageButton.razor

@using BlazorStyled

<Styled @bind-Classname=ButtoncontainerStyle>
    position: @Position;
    left: @LeftStyle;
    top: @TopStyle;
    z-index: @ZIndex;
    display: inline-block;
    outline: none;
    border: none;
    width: @WidthStyle;
</Styled>
<Styled @bind-Classname=@ButtonStyle>
    background-image: url('@ImageUrl');
    background-size: 100% 100%;
    display: inline-block;
    justify-content: center;
    align-items: center;
    outline: none;
    border: none;
    background-repeat: no-repeat;
    background-color: transparent;
    width: @WidthStyle;
    height: @HeightStyle;
    white-space: nowrap;
    font-size: @TextSizeStyle;
    color: @TextColorName;
    vertical-align: central;
</Styled>
<Styled @bind-Classname=@ButtontextalignStyle>
    text-align: @ButtonTextAlign;
</Styled>

<style>
    .imagebutton
    {
        cursor: default;
    }
    .imagebutton:focus
    {
        outline: none !important;
        border: none !important;
    }
    .imagebutton:hover
    {
        outline: none;
        border: none;
        cursor: pointer !important;
    }
</style>

@if (Visible)
{
    <div class="@ButtoncontainerStyle">
        <button class="imagebutton @ButtonStyle" @onclick="ButtonClicked" title="@Title">
            <span class="@ButtonTextAlign">@ButtonText</span>
        </button>    
    </div>
}