Styling The "Submit" Button - Inject CSS Code Needed

  • Profile Image
    Asked on January 28, 2011 at 06:08 PM



    Could you give me the inject css codes to enable me to change the colour of the default submit button. I have 6 forms and want each submit button to be a different colour.

    I would a light blue, light green, light purple, dark red, dark green and black submit buttons.

    I havd read the post titled " How to style the "submit" button?" and it shows an inject css code to create a submit buton and shows an example of a red submit button.

    Could you show me the inject css codes needed for my 6 submit buttons.


  • Profile Image
    Answered on January 31, 2011 at 02:35 AM

    So, you need that exact same submit button but on different colors? 

    Just copy that code completely but replace where you see "#ff3019" and "#cf0404" with that color. If you need to make a gradient you can change them to different colors. Or you can just change them to a single color. Here is the light blue example:

    .form-submit-button, .form-submit-reset, .form-submit-print { -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); background: #0000FF; background: -moz-linear-gradient(top, #0000FF 0%, #0000FF 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0000FF), color-stop(100%,#0000FF)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000FF', endColorstr='#0000FF',GradientType=0 ); border: 2px solid #FFFFFF; color: #FFFFFF; font-size: 16px; font-weight: bold; margin: 0; overflow: visible; padding: 10px; text-shadow: 0 0 5px #777777; width: auto; }