Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #183525

    Hi Kriesie & team,

    I’ve been searching my ass of, and tried various things and tutorials but I am not able to style my contact form “submit” button.

    http://www.z2h.nl/davoodi check the contact and bookings section, its just a plain red button now, i wanna add a gradient to it.. Please can you tell me how to do this? My css knowledge is not that vast so if you could explain it in a n00bish way it would get me far enough I think!

    I have also looked on the forums and found this thread were someone suggested to add css to the quick css but that didn’t work out for me as well.

    Thx in advance!

    #183544

    Hey z2h!

    This selector will target that button:

    .button[type='submit']{
    
    }

    Regarding the gradient you could create one here, copy the generated code and put it inside the selector, for example:

    .button[type='submit'] {
    background: #1E5799;
    background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1E5799), color-stop(50%,#2989D8), color-stop(51%,#207CCA), color-stop(100%,#7DB9E8));
    background: -webkit-linear-gradient(top, #1E5799 0%,#2989D8 50%,#207CCA 51%,#7DB9E8 100%);
    background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    background: linear-gradient(to bottom, #1E5799 0%,#2989D8 50%,#207CCA 51%,#7DB9E8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
    }

    Then, simply paste the whole code in the Quick CSS and that would be it.

    Cheers!
    Josue

    #183579

    Ok sorry for this kind of a newbie question, I guess i’m supposed to add the 2nd code to the quick CSS.

    But what i do with the first, could you please explain a bit more… As I said before my css skills are very minimal, but im trying and learning more every day!

    Thanks!
    Nick

    #183581

    Don’t worry, it’s pretty simple:

    First, in this website you create or choose one gradient:

    Then you copy the code generated:

    And finally you mix it with the code i provided to you (put it inside { .. }):

    .button[type='submit'] {
    background: #1E5799;
    background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1E5799), color-stop(50%,#2989D8), color-stop(51%,#207CCA), color-stop(100%,#7DB9E8));
    background: -webkit-linear-gradient(top, #1E5799 0%,#2989D8 50%,#207CCA 51%,#7DB9E8 100%);
    background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    background: linear-gradient(to bottom, #1E5799 0%,#2989D8 50%,#207CCA 51%,#7DB9E8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#1e5799′, endColorstr=’#7db9e8′,GradientType=0 );

    }

    Regards,
    Josue

    #183721

    Ah I found out why it didnt work in the first place. I already had some css in the quick css form, so I had to place the button css above all other code instead of at the bottom, works fine now!

    Thx

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Styling submit button’ is closed to new replies.