Button Icon Color

[Michel Jost]

Hi,

I am trying to change the color of the button icon on hover. But i cannot find a way to do so.

    .e-button-batch-select, .e-button-batch-select:focus, .e-button-batch-select:active {
        border-radius: 0;
        height: 32px;
        width: 32px;
        background-color: #007BFF;
    }
    
    .e-button-batch-select:hover {
        background-color: #0067D9;

         color: red;

    }
        
    .e-button-batch-select-icon::before {
        content: '\e759';
        color: #FFFFFF;
    }

I tried this per setting the color property in the :hover style.

Can you please provide me a way to change to color of the icon on button hover?

Thanks in advance

Michel

[Aravinthan Seetharaman]

 Hi Michel Jost, 

  

We have checked your query. We can achieve your requirement by using IconCss attribute with custom CSS class as mentioned below. 

@using Syncfusion.Blazor.Buttons 

 

<SfButton CssClass="btn" IconCss="e-icons e-copy">SfButton> 

 

<style> 

    .btn { 

        height: 32px; 

        width: 32px; 

    } 

    .e-copy::before { 

        content: '\e77b'; 

    } 

    .e-copy:hover { 

        background-color: #0067D9; 

        color: red; 

    } 

    .e-btn.e-icon-btn{ 

        padding: initial; 

    } 

style> 

 

 

Could you please check the above details and get back to us, if you need any further assistance on this. 

 

Regards, 

Aravinthan S. 

  

  

[Michel Jost]

Your example is the same as my code snippet.

In my example I set the standard icon color to color: #FFFFFF and on hover to red. But it is not working.

[Aravinthan Seetharaman]

Hi Michel Jost, 

  

We have checked your reported query, and we can achieve your requirement by modifying your code as like below. 

@using Syncfusion.Blazor.Buttons 

 

 

<SfButton CssClass="e-button-batch-select" IconCss="e-icons e-button-batch-select-icon"></SfButton> 

<style> 

    .e-button-batch-select, .e-button-batch-select:focus, .e-button-batch-select:active { 

        border-radius: 0; 

        height: 32px; 

        width: 32px; 

        background-color: #007BFF; 

    } 

 

    .e-button-batch-select:hover { 

        background-color: #0067D9; 

        color: red; 

    } 

 

    .e-button-batch-select-icon::before { 

        content: '\e759'; 

    } 

    .e-button-batch-select-icon { 

        color: #FFFFFF; 

    } 

    .e-button-batch-select:hover .e-button-batch-select-icon { 

        color: red; 

    } 

 

</style> 

Sample: https://www.syncfusion.com/downloads/support/forum/159796/ze/ButtonIconCss-2133617437 

 Please let us know if you need further assistance on this. 

  

Regards, 

Aravinthan S.