1. Home
  2. Forum
  3. Blazor
  4. Button Icon Color

Button Icon Color

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

3 Replies 1 reply marked as answer
AS Aravinthan Seetharaman Syncfusion Team November 18, 2020 07:56 AM UTC

 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. 
  
  


MJ Michel Jost November 23, 2020 08:25 AM UTC

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.

AS Aravinthan Seetharaman Syncfusion Team November 24, 2020 05:24 PM UTC

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> 

 Please let us know if you need further assistance on this. 
  
Regards, 
Aravinthan S. 


Marked as answer
Loader.
Up arrow icon