We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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

3 Replies

PK Prem Kumar Madhan Raj Syncfusion Team September 8, 2017 12:31 PM UTC

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.   
   
   
Regards,   
Prem Kumar. M   



DA dan September 10, 2017 03:18 AM UTC

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


PK Prem Kumar Madhan Raj Syncfusion Team September 11, 2017 12:42 PM UTC

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. 
 
To know about cssClass API of button control, please refer the below link. 
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 


Loader.
Up arrow icon