Styling submit button - Support | Kriesi.at

Tagged: button, CONTACT FORM, CSS, gradient, styling, submit

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

Author

Posts
November 1, 2013 at 10:37 pm #183525

z2h
Participant

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!

November 1, 2013 at 11:38 pm #183544
Josue
Inactive Moderator
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
November 2, 2013 at 1:30 am #183579

z2h
Participant

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

November 2, 2013 at 1:36 am #183581

Josue
Inactive Moderator

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

November 2, 2013 at 5:17 pm #183721

z2h
Participant

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
Author

Posts