Title: [Plugin: Custom Contact Forms] Customize button
Last modified: August 20, 2016

---

# [Plugin: Custom Contact Forms] Customize button

 *  [grisgo](https://wordpress.org/support/users/grisgo/)
 * (@grisgo)
 * [14 years, 2 months ago](https://wordpress.org/support/topic/plugin-custom-contact-forms-customize-button/)
 * How can I customize the “Send message” button to use a image instead of a real
   button?
 * I saw you can do it on Contact Forms 7 on [http://wordpress.org/support/topic/contact-form-7-style-the-submit-button](http://wordpress.org/support/topic/contact-form-7-style-the-submit-button),
   but can’t find it on Custom Contact Forms…
 * Thanks,
    Pol
 * [http://wordpress.org/extend/plugins/custom-contact-forms/](http://wordpress.org/extend/plugins/custom-contact-forms/)

Viewing 3 replies - 1 through 3 (of 3 total)

 *  [Marinko](https://wordpress.org/support/users/weberteam/)
 * (@weberteam)
 * [14 years, 2 months ago](https://wordpress.org/support/topic/plugin-custom-contact-forms-customize-button/#post-2646240)
 * Hi grisgo,
 * I’ve used this code to make mine:
 *     ```
       .submit {
       	color:#050;
           font-family: Arial;
           font-size: 2em;
           padding: 5px 10px 5px 10px;
           border: 1px solid #999;
           text-shadow: 0px 1px 1px #fff;
           text-decoration: none;
           border-radius: 6px;
           -moz-border-radius: 6px;
           -webkit-border-radius: 6px;
           background: #0060df;
           background: -moz-linear-gradient(-90deg, #d09292 5%, #c16f6f 15%, #a83939 35%, #ef1313 75%, #ff7878 100%, #fff);
           background: -webkit-gradient(linear, left top, left bottom, from(#d09292), to(#ff7878), color-stop(0.2, #c16f6f), color-stop(0.5, #a83939), color-stop(.7, #ef1313), color-stop(0.9, #ff7878));
           filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a83939', endColorstr='#ff7878', GradientType=0 );
           cursor: pointer;
       }
       .submit:hover {
           background: -moz-linear-gradient(90deg, #d09292 5%, #c16f6f 15%, #a83939 35%, #ef1313 75%, #ff7878 100%, #fff);
           background: -webkit-gradient(linear, left bottom, left top, from(#d09292), to(#ff7878), color-stop(0.2, #c16f6f), color-stop(0.5, #a83939), color-stop(.7, #ef1313), color-stop(0.9, #ff7878));
           filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7878', endColorstr='#a83939', GradientType=0 );
       }
       ```
   
 * I know that this is not an image but it looks cool. Someone might find this useful
   🙂
 *  [leoahrens](https://wordpress.org/support/users/leoahrens/)
 * (@leoahrens)
 * [13 years, 6 months ago](https://wordpress.org/support/topic/plugin-custom-contact-forms-customize-button/#post-2646323)
 * > .submit:hover {
   >  background: -moz-linear-gradient(90deg, #d09292 5%, #c16f6f
   > 15%, #a83939 35%, #ef1313 75%, #ff7878 100%, #fff); background: -webkit-gradient(
   > linear, left bottom, left top, from(#d09292), to(#ff7878), color-stop(0.2, #
   > c16f6f), color-stop(0.5, #a83939), color-stop(.7, #ef1313), color-stop(0.9,#
   > ff7878)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr
   > =’#ff7878′, endColorstr=’#a83939′, GradientType=0 ); }
 * What .css file did you add this code into? The plugin .css files or the sites
   theme files?
 * Can’t get mine to affect the submit button no matter where I place it….
 *  [davewgill](https://wordpress.org/support/users/davewgill/)
 * (@davewgill)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/plugin-custom-contact-forms-customize-button/#post-2646327)
 * I have a workaround for this. I created a new style and set the Button Background:
   option to point to my new button. I then set the Button Width: to 500px… this
   pushes the text away from your button….then I just set the Button Font Color:
   to the same colour as the background… Not ideal but does the job and looks great….

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘[Plugin: Custom Contact Forms] Customize button’ is closed to new replies.

 * ![](https://ps.w.org/custom-contact-forms/assets/icon-256x256.png?rev=1067156)
 * [Custom Contact Forms](https://wordpress.org/plugins/custom-contact-forms/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/custom-contact-forms/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/custom-contact-forms/)
 * [Active Topics](https://wordpress.org/support/plugin/custom-contact-forms/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/custom-contact-forms/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/custom-contact-forms/reviews/)

 * 3 replies
 * 4 participants
 * Last reply from: [davewgill](https://wordpress.org/support/users/davewgill/)
 * Last activity: [13 years, 5 months ago](https://wordpress.org/support/topic/plugin-custom-contact-forms-customize-button/#post-2646327)
 * Status: not resolved