Can I change the button colors?

  • Profile Image
    emclanekinsethcom
    Asked on July 15, 2013 at 10:36 AM

    I would like to change the colors of the buttons to match my layout.

     

    http://www.jotform.com//?formID=31576130560145

  • Profile Image
    pinoytech
    Answered on July 15, 2013 at 10:50 AM

    Hi,

    Yes, you can change the color of your buttons. For more information, please take a look at this article: http://www.jotform.me/help/118-Submit-Button-CSS-CSS3

    I've cloned also your form and made some fixed on your header image.

    http://www.jotformpro.com/form/31954429130957

    This is the css code that I've used to fixed the header image.

    #id_61.form-line {

    padding: 0;

    }

    If you need further assistance, please let us know.

    Thank you!

  • Profile Image
    emclanekinsethcom
    Answered on July 15, 2013 at 11:06 AM
    Still having trouble with the buttons. I want all buttons to change, not
    just the submit button. Thanks.
  • Profile Image
    pinoytech
    Answered on July 15, 2013 at 11:45 AM

    Hi,

    May I ask what color you want for your pagebreak and submit button?

    If you take a look at this cloned form, I was able to change the color of your pagebreak and submit button using this codes.

    .form-submit-button, .form-submit-reset, .form-submit-print, .form-pagebreak-back, .form-pagebreak-next {

    border: 1px solid #FF7B0D !important;

    -moz-box-shadow: inset 0px 1px 0px 0px #FF7B0D !important;

    -webkit-box-shadow: inset 0px 1px 0px 0px #FF7B0D !important;

    box-shadow: inset 0px 1px 0px 0px #FF7B0D !important;

    background: #FF7B0D !important;

    background: -moz-linear-gradient(top, #ededed 0%, #dfdfdf 100%);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#dfdfdf));

    background: linear-gradient(top, #ededed 0%, #dfdfdf 100%);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf', GradientType=0 );

    }

    Thank you!