Button customization

[Alberto Monteverdi]

Hi Syncfusion team,

I tried to customize Vue Button control, but some features are working and some not.

Here below in detail my attempt:

<template>

...

     <ejs-button cssClass="app-btn-prova" isPrimary="False">Prova</ejs-button>
...

</template>

<style>
.app-btn-prova {
  border: 1px solid green; ---> it doesn't work
  border-radius: 14px; ---> it doesn't work
  height: 50px; ---> it works
  width: 160px; ---> it works
  text-align: left; ---> it doesn't work
  padding-left: 70px; ---> it doesn't work
  font-family: Arial; ---> it doesn't work
  font-size: 18px; ---> it doesn't work
  margin-left: 20px; ---> it works
  margin-top: 30px; ---> it works
  margin-bottom: 20px; ---> it works
  background: url('./assets/images/grayui/delete.png') no-repeat; ---> it works
  background-position-x: 10px; ---> it works
  background-position-y: 4px; ---> it works
  background-size: 40px; ---> it works
  background-color: yellow; ---> it doesn't work
}
 
.app-btn-prova:hover, .app-btn-prova:focus, .app-btn-prova:active {
  background-color: gray; ---> it doesn't work
  color: white; ---> it doesn't work
}

</style>

What am I doing wrong ?

Thank You in advance for your help.

Kind Regards.

Alberto Monteverdi

[Gayathri KarunaiAnandam]

  

Hi Alberto, 

We have checked your code snippet . For Button component, we prioritize our style by preceding with e-btn for all classes. When you add custom style ,your styles are override by the component style. You can prioritize your style by writing the custom class start with e-btn class. 

                                                                                                      

For your convenience we have attached the sample and please find the sample for your reference 

Code : 

<style> 

.e-btn.app-btn-prova { 

   Border: 3px solid green; 

   … 

   … 

   } 

.e-btn.app-btn-prova:hover, 

.e-btn.app-btn-prova:focus, 

.e-btn.app-btn-prova:active { 

  background-color: gray; 

  color: white; 

} 

</style> 

We have prepared the sample on this, please refer the link below 

Link: https://codesandbox.io/s/button-customization-forked-z59lu?file=/src/App.vue 

Regards, 

Gayathri K