How can I style the 'Submit' button like the one in this image?

  • Angusnorriss
    Asked on September 25, 2019 at 7:15 PM
  • David JotForm Support Manager
    Replied on September 25, 2019 at 8:22 PM

    Please inject the following CSS code to make your form's submit button similar to the one in your example: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    .form-submit-button {

        transform: rotate(0deg);

        color: black !important;

        background: 0 0!important;

        border-width: 2px!important;

        border-style: solid!important;

        border-radius: 30px !important;

        font-weight: 700 !important;

        font-size: 17px !importatn;

        font-family: "Open Sans",Arial,sans-serif;

        line-height: 1.5!important;

        padding: 14px 30px;

        border-color: #23CE9A !important;

        width: 200px !important;

        height: 50px !important;

    }

    .form-all .form-submit-button, .form-all .form-submit-reset, .form-all .form-submit-print {

        transform: rotate(0deg);

        color: black !important;

        background: 0 0!important;

        border-width: 2px!important;

        border-style: solid!important;

        border-radius: 30px !important;

        font-weight: 700 !important;

        font-size: 17px !importatn;

        font-family: "Open Sans",Arial,sans-serif;

        line-height: 1.5!important;

        padding: 14px 30px;

        border-color: #23CE9A !important;

        width: 200px !important;

        height: 50px !important;

    }

    .form-buttons-wrapper:before {

    display: none !important;

    }

    .form-buttons-wrapper:after {

    display: none !important;

    }

    Result: https://www.jotform.com/92677894727984

    1569457188example Screenshot 10

    Let us know if you need more help, we will be glad to assist you.