How to get your custom background image button to look the same as a normal css background image button

[dan]

The standard css button is a different size and has a white border compared to a standard html button using css background-image.  See code and screen shot

.sf-button is the syncfusion button and .css-button is a standard css button

.sf-button {
  background-image: url( '../../images/Computer-Desktop.png' );
  width : 45px;
  height : 45px;
  border-style: none;
  background-repeat: no-repeat;
}


#css-button {
  background-image: url( '../../images/Computer-Desktop.png' );
  width : 45px;
  height : 45px;
  border-style: none;
  background-repeat: no-repeat;
}

$("#sf-button").ejButton({
  contentType: "imageonly",
  prefixIcon: "e-icon sf-button"
});

See attached image top is #css-button and bottom is .sf-button

Attachment: computerimage_9d79b9a4.7z

[Prem Kumar Madhan Raj]

Hi dan,   

   

Thanks for contacting Syncfusion support.   

   

We have analyzed your query that ejbutton differs in size and has a white border compared to standard html button while using background-image. From the shared code snippet, the height and width of the CSS button is set as “45px” and hence only the image fit within the button (only the desktop icon) is displayed and the remaining part of the image is hidden. Whereas in ejbutton, the height and width is set as “45px” for prefixIcon only, hence the image is displayed with the background white color in the image which appears like a border in the image.    

   

We can overcome this by resizing the background-image height and width to the required values and then use the resized image as the background-image for prefixIcon such that the image fits exactly in the button control. For your convenience, we have created a simple sample with and without resizing the image to required size (45px) in the below link. Please check it.   

   

Link: http://jsplayground.syncfusion.com/uagxtmxs   

   

Regards,   

Prem Kumar. M   

[dan]

I still can't get it to look like the image with no border.  Attached is the Metro Studio file and my project.

Thank you.

Attachment: client2_163b3e68.7z

[Prem Kumar Madhan Raj]

Hi dan, 

Sorry for the inconvenience caused. 

 

We have checked your query, screenshots and we would like let you know that you can achieve your requirement by overriding CSS styles using cssClass API.  

For example, to override the CSS to remove the border of the button element (with help of cssClass), please refer the below code where buttons class’s styles “.e-btn.e-select” is get overridden by cssClass API. 

.e-button.e-select.customClass{ 

            border: none; 

} 

 

For your convenience, we have made changes in your sample and attached in the link below. please check it. 

Link: http://www.syncfusion.com/downloads/support/forum/132554/ze/client21830187580 

 

To know about cssClass API of button control, please refer the below link. 

Link: https://help.syncfusion.com/api/js/ejbutton#members:cssclass 

If this is not your scenario, then please get back to us with more information so that we can provide exact solution for your requirement. 

 

 

Regards, 

Prem Kumar. M