Customize buttons to use color gradient

  • Profile Image
    Clintluna
    Asked on July 18, 2018 at 05:17 PM

    I'd like to Customize Design of Various Button Designs to look like the image I've attached below for this form.

    I just need the code to fade from one color blue to a lighter color, I have already figured out the rest.

    I'm going to do this for my Radio Button Widgets, Configurable List Button, and the Continue / Previous buttons that take you to the next page.

     

    Thanks!

     

    Screenshot
  • Profile Image
    Vanessa_T
    Answered on July 18, 2018 at 09:11 PM

    To achieve a fading effect, you only need the following CSS:

    background: -moz-linear-gradient(top, #21a6cf 0%, #badce6 100%);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#21a6cf), color-stop(100%,#badce6));

    background: linear-gradient(top, #21a6cf 0%, #badce6 100%);

    You'll be needing those 3 lines for browser compatibility.

    #21a6cf would be your starting color

    #badce6 would be the bottom color

     

    To apply the CSS into your page buttons (back/next/submit), simply get the field IDs / class, add the CSS above, then inject it into your form. 

    Meanwhile, follow this guide to inject custom CSS into each widget: How-to-Inject-CSS-Codes-to-Widgets

     

    On the other hand, I have cloned your form, made the necessary changes as well as fixed the current CSS and a few more tweaks. Feel free to clone the form if it is of your liking and update it as you see fit.

    Form URL: https://form.jotform.com/81987702056969

  • Profile Image
    Clintluna
    Answered on July 21, 2018 at 10:15 PM

    Thanks Vanessa, this was great!!!

  • Profile Image
    Clintluna
    Answered on July 23, 2018 at 08:08 PM

    Hey Vanessa, 


    So I'm using my code to try to duplicate the Configurable list buttons I made, and trying to make my radio buttons look the same....just not sure how I would edit it specifically for the radio buttons, for example on the cofigurable list code i used .add,.remove for the buttons but for the radio buttons, and next buttons I'm not sure what the name is. I know the id_for the radio buttons is #122, pasted this into my forms editor:


    li#id_122 {


    th {


      color: #21a6cf !important;


     font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, sans-serif;



    }




    input[type="text"]{


    width: 80px;


    }



    select{


    width: 55px;


    }


    #list > tbody > tr:first-child {display: none;}


    .mobileColumnName {


        display: block;


        color: #21a6cf !important;


        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, sans-serif;


        font-weight: bold;


    }


    td {float: left;}


    td.col5 {clear: left;}


    input { width: 150px !important;}


    .add, .remove {


        width: 150px;


         height: 60px;


        white-space: pre-wrap;


    }


    button {


    font-weight: bold;


    }



    .add, .remove {

        border-radius: 10px;

        border: 2px solid #21a6cf

        padding: px; 

        width: 150px;

        height: 58px;

        color: #ffffff;

        font-family: "Open Sans"; 

        font-size: 20px;   

        box-shadow: 8px 8px 5px grey;

    }


    .add, .remove {


      background: #21a6cf;


    }


    }


  • Profile Image
    Vanessa_T
    Answered on July 23, 2018 at 09:58 PM

    Hello,

    Please note that for widgets, the CSS needs to be added on the Widget's Settings > Custom CSS tab. So for Configurable List and Radio Buttons, you need to follow this guide:

    How-to-Inject-CSS-Codes-to-Widgets

    15323960692.gif

    Meanwhile for buttons that are not part of a Widget, you may continue applying the CSS like the one you just did.

    How-to-Inject-Custom-CSS-Codes


    Based on your posted CSS, I assume this is the form you are referring to this time: https://www.jotform.com/81906589374168

    I've reviewed your CSS, and I can see you have .add,.remove in the main form's custom CSS tab. Again, please note that the widget's CSS should be injected on their respective Widget's Settings > Custom CSS tab. The ones on the main form's custom CSS are actually just ignored.

    15323969181.png

    For the Button Radios, please use this CSS selector to apply your changes:

    .radios input + label

    So, it would become something like this format:

    .radios input + label {

        background: blue;

    }


    For the pagebreak buttons (back/next/submit), you can use the selector below:

    .form-all .form-pagebreak-back,

    .form-all .form-pagebreak-next,

    .form-all .form-submit-button