How do I get rid of the white lines on my submit button?

  • Profile Image
    ancientalkemist
    Asked on November 29, 2013 at 10:30 PM

    I customised my submit button to match my website, but I'm still seeing white lines at the top and bottom. I set the button style

    to none and then injected my css. The lines are still there. Here is my css:

     

    .form-submit-button {

    background:#272727!important;

    border: none!important;

    -webkit-border-top-left-radius:0px;

    -moz-border-radius-topleft:0px;

    border-top-left-radius:0px;

    -webkit-border-top-right-radius:0px;

    -moz-border-radius-topright:0px;

    border-top-right-radius:0px;

    -webkit-border-bottom-right-radius:0px;

    -moz-border-radius-bottomright:0px;

    border-bottom-right-radius:0px;

    -webkit-border-bottom-left-radius:0px;

    -moz-border-radius-bottomleft:0px;

    border-bottom-left-radius:0px;

    color:#ffffff!important;

    font-family:'helvetica';

    font-size:15px;

    height:41px;

    width:95px;

    }

  • Profile Image
    jedcadorna
    Answered on November 30, 2013 at 12:54 AM

    Thank you for contacting us. Please try changing your code with this and see if this works for you.

     

    .form-required{

    color: #efefef;

    }.form-submit-button {

    background:#272727!important;

    border-style:outset!important;

    border-color:#272727!important;

    box-shadow:none !important;

    -webkit-border-top-left-radius:0px;

    -moz-border-radius-topleft:0px;

    border-top-left-radius:0px;

    -webkit-border-top-right-radius:0px;

    -moz-border-radius-topright:0px;

    border-top-right-radius:0px;

    -webkit-border-bottom-right-radius:0px;

    -moz-border-radius-bottomright:0px;

    border-bottom-right-radius:0px;

    -webkit-border-bottom-left-radius:0px;

    -moz-border-radius-bottomleft:0px;

    border-bottom-left-radius:0px;

    color:#ffffff!important;

    font-family:'helvetica';

    font-size:15px;

    height:41px;

    width:95px;

    }

    .form-line-error {

    background:none repeat scroll 0 0;

    }#input-7{

    margin-bottom: 10px;

    }


  • Profile Image
    jedcadorna
    Answered on November 30, 2013 at 01:05 AM

    If you want your border from this:

     

    to this:

     

    You can remove border-style:outset!important;

    You can see the difference that the border on the right corner and bottom was removed.