The send button is a PNG with a shadow. It's not displayed right, I think it's no problem with the file. How can I make it look better?

  • DannyT
    Asked on June 3, 2016 at 12:55 PM
    - the send button is a PNG with a shadow. It's not displayed right, i think it's no problem with the file. how can i make it look better (including the shadow of png)?
  • Kevin Support Team Lead
    Replied on June 3, 2016 at 1:03 PM

    I have checked the form embedded on your Facebook page and I can see it is currently displaying like this: 

    The send button is a PNG with a shadow Screenshot 30

    I'm not sure how would you like the button to display, I have downloaded the .png image and I can see it is displaying the same. 

    Also, the button's shadow seems to be white, this is why  it is being displayed like that, you would need to change it to display the color that you want: 

    The send button is a PNG with a shadow Screenshot 41

    Please provide us a bit more about how you would like the button to look, we will be glad to help you. 

  • DannyT
    Replied on June 4, 2016 at 6:25 AM

    I want that it look like this. What must i do to get such a send button?

     

    The send button is a PNG with a shadow Screenshot 20

  • DannyT
    Replied on June 4, 2016 at 6:43 AM

    i have change the png (without) shadow, but it's still present. please check: https://www.facebook.com/gildenkoelsch/app/699587613458213/

     

  • Mike_G JotForm Support
    Replied on June 4, 2016 at 8:43 AM

    When I checked your form through your Facebook page I see that you were able to remove the white background of the image.

    The send button is a PNG with a shadow Screenshot 40

    You may be able to somehow get the same style of the button in the image you posted if you add the following CSS codes to your form.

    button#input_2 img {

        border-radius: 12px !important;

        border-left: 1px solid black;

        border-bottom: 1px solid black;

        border-style: none none inset inset;

    }

    However, since the image width and height is a little longer than the button in it, it still has a small portion in between.

    The send button is a PNG with a shadow Screenshot 51

    If you can make the width and height of the image the same as the width and height of the button in it, then, it would look much more similar to what you're trying to achieve. Then end of the blue portion is the height and width of the image.

    Right now, if the CSS code above is added to your form, your form will look like this in your Facebook page.

    The send button is a PNG with a shadow Screenshot 62

    I hope this helps. Let us know if you need any further assistance. Thank you.