How can I use a custom button color for the Submit and Reset buttons?

  • Profile Image
    soulz2003
    Asked on May 30, 2013 at 02:43 PM

    I want to use the HEX color code #283ABF for my submit/reset buttons.  How do I do this?

  • Profile Image
    Khrisell
    Answered on May 30, 2013 at 03:48 PM

    Hello @soulz2003,

    Here's the complete guide on how to do that.

    1. Go to “setup & embed” tab and select “preferences”

    submit button css
     

    2. Go to “form styles” tab and click to the empty space next to “Inject custom CSS”
     inject custom css


    3. Copy the CSS code to the place where it says "Click to edit"
     
    .form-submit-button{
    background:#0066A2;
    color:white;
    border-style:outset;
    border-color:#0066A2;
    height:50px;
    width:100px;
    font: bold 15px arial,sans-serif;
    }
     

    Here's how it'll look
    4. Click close settings and you're done


    Details of the CSS code for your submit button
     
    .form-submit-button - Selects the submit button on your form.
     
    background - Sets up the background color behind the text.
     
    color - Determines the color of your text.
     
    border-style - Sets the style of your submit button borders.
     
    border-color - Sets the color of your submit button borders.
     
    height - Sets the height of your button and is indicated with pixels.
     
    width - Sets the width of your button and is indicated with pixels.
     
    font - Sets the font properties.
     
    NOTE: Do not forget to add semicolons (;) after each property.


    Submit Button CSS3 & Hover Effect

    Follow the steps on changing your submit button as above. The only thing that changes is the code.

    Example CSS3 for a submit button:

    .form-submit-button{
    background:#B9DFFF;
    color: #fff;
    border: 1px solid #eee;
    border-radius: 20px;
    box-shadow: 5px 5px 5px #eee;
    }
    .form-submit-button:hover{
    background:#016ABC;
    color: #fff;
    border: 1px solid #eee;
    border-radius: 20px;
    box-shadow: 5px 5px 5px #eee;
    }

    Here's how it looks.

    css3 submit button
    and on hovering the mouse over it:
    css3 submit button hover

    Details each CSS3 code for your submit button

    .form-submit-button:hover - This is the class when the mouse is hovered on to the submit button. Every other field is left the same except the background to show what's happening on mouse hover.

    border-radius - Rounds the corner of your submit buttons.
     
    box-shadow - Sets a shadow for your submit button.

    text-shadow (not applied to example) - Sets a shadow for the text inside your submit button.


    Feel free to let us know if you have further questions or inquiry.
    Thank you for contacting JotForm.
    Cheers!
  • Profile Image
    soulz2003
    Answered on May 30, 2013 at 04:31 PM

    How do I ensure that both buttons are the same height?  Through CSS?  'Clear' and 'Submit' that is.

     

    http://new.converseconsultants.com/contact-us

  • Profile Image
    khrisell
    Answered on May 30, 2013 at 05:08 PM

    Yes, Make sure they have the same value on the injected CSS code.

  • Profile Image
    EltonCris
    Answered on May 30, 2013 at 09:31 PM

    @soulz2003

    In addition to my colleague, here are the CSS classes for the the 3 different form buttons. Submit, Reset and Print.

    .form-submit-button,

    .form-submit-reset,

    .form-submit-print{

    height:40px !important;

    }

    You can change 40 before injecting that to your form. Thanks!