Format Prev, Next and Send buttons in a multipage form.

  • Profile Image
    jaes
    Asked on October 22, 2013 at 10:00 AM

    Hi, I just want solid colors for my button/button hover.

    This is for the prev/next buttons in a multipage form as well as the send button.

    Thanks,

    Jeremiah

  • Profile Image
    ardy0689
    Answered on October 22, 2013 at 10:33 AM

    Hello, you may use this CSS code to Inject a Custom CSS:

    .form-pagebreak-next,.form-pagebreak-back,.form-submit-button

    {
    background:none !important; 
    background-color:#ff0000 !important;  /*this is for background-color*/
    color:white !important;    /*this is for font color*/

    }

     

    This is the CSS for hover:

    .form-pagebreak-next:hover,.form-pagebreak-back:hover,.form-submit-button:hover
    {

    background-color:#ff2700 !important;  /*this is for background-color*/
    color:white !important;    /*this is for font color*/

    }

     

    Please refer to this guide on how to inject a custom CSS. If you need further help, feel free to post your concerns here on the forum. Thanks

  • Profile Image
    jaes
    Answered on October 22, 2013 at 12:10 PM

    Thank you. I'm still getting this white line across the top of the button.

  • Profile Image
    jaes
    Answered on October 22, 2013 at 12:12 PM

    The text is blurry too, like it's writing double.

  • Profile Image
    EliezerN
    Answered on October 22, 2013 at 01:23 PM

    @jaes

    Are you refering to the horizontal line above of the next/back button?

    Just insert the next CSS code: 

    .form-pagebreak

    {

    border-top: none !important;

    }

     

    You see the text blurry because it has "text-shadow", so, in order to remove it ust insert the next CSS code: 

    .form-pagebreak-next,.form-pagebreak-back, .form-submit-button

    {

    text-shadow:none !important;

    }

    So now the text of the buttons will look like this: 

    I hope that helps.

    If you need to make questions different from the orifinal one of this thread kindly open a new thread to post your question there as we can't answer multiple unrelated questions in one single thread.

    Thanks

  • Profile Image
    jaes
    Answered on October 22, 2013 at 01:27 PM

    Thanks but no. There is a white line or gap at the top of the button itself. You can see it in your image. The text on the button is also written twice so it looks blurry. There is also a shadow below the button. I just want a flat, crisp button like my newsletter button which is on the same page.

    http://jaes.myshopify.com/

  • Profile Image
    jaes
    Answered on October 22, 2013 at 02:58 PM

    Any luck?

  • Profile Image
    jaes
    Answered on October 22, 2013 at 03:03 PM

    hey, i see you are working on it, cool!

  • Profile Image
    jaes
    Answered on October 22, 2013 at 03:26 PM

    i missed the text shadow comment above, oops.

    thanks

  • Profile Image
    jedcadorna
    Answered on October 22, 2013 at 03:30 PM

    @jaes,

    I have made some changes please check your site if that is what you want. Thanks,

  • Profile Image
    jaes
    Answered on October 22, 2013 at 03:47 PM

    Yes it really looks fine. Thank you.

  • Profile Image
    jedcadorna
    Answered on October 22, 2013 at 03:59 PM

    You are welcome. Let us know if you have other questions. Thanks,