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.
Unfortunately, activation email could not send to your email. Please try again.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

132554 Sep 7,2017 10:20 PM Sep 11,2017 08:42 AM JavaScript 3
loading
Tags: ejButton
dan
Asked On September 7, 2017 10:25 PM

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 [Syncfusion]
Replied On September 8, 2017 08:31 AM

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   


dan
Replied On September 9, 2017 11:18 PM

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 [Syncfusion]
Replied On September 11, 2017 08:42 AM

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;