Need to remove weird border around my submit button

  • Profile Image
    wildfirecap
    Asked on June 29, 2012 at 03:08 PM

    Hello,

    I have a weird style border around my submit button image:

    http://enhancedbrand.com/wildfire/contact.html

    I searched your forums and found one person who had a similar issue, but their solution of going to the 'button styles' and choosing 'none' is not an option anymore.

    Iwould also like to have a different image appear on mouseover.

    I have injected some css to try to conquer both problems, but none of it is working.

    Please help!  Thank you so much!

  • Profile Image
    abajan
    Answered on June 29, 2012 at 10:14 PM

    To fix the first issue, add the following rule of the form's injected CSS:

    .form-submit-button:active {
    -moz-box-shadow: 0 1px #000 inset;
    -webkit-box-shadow: 0 1px #000 inset;
    box-shadow: 0 1px #000 inset;
    }

    As to having a different image appear on mouseover, first create the image. Ideally, it should be of the same dimensions as the un-mouseovered button image. I would recommend either just making its text white or the background green. Something like this:

    (In my opinion, both states would look better if they had white text with a white arrow but that's totally a matter of tastes.)

    Ha ha... I'm trying to figure out the best way to implement the mouseover (hover) effect. I'll have to get back to you on that but in the meantime, here's an alternative solution that uses the built-in buttons provided by the form builder.

    (If you want to use your own images for the normal and hover states, I believe this article points us in the right direction but I'll need to properly peruse it and test the solution.)

  • Profile Image
    abajan
    Answered on June 29, 2012 at 10:25 PM

    My apologies. To match the color of your page, please change the hightlighted portions of the rule I provided above with #D5D5D5

    .form-submit-button:active {
    -moz-box-shadow: 0 1px #000 inset;
    -webkit-box-shadow: 0 1px #000 inset;
    box-shadow: 0 1px #000 inset;
    }