WordPress.org

Forums

Custom Contact Forms
Customize button (4 posts)

  1. grisgo
    Member
    Posted 3 years ago #

    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 , but can't find it on Custom Contact Forms...

    Thanks,
    Pol

    http://wordpress.org/extend/plugins/custom-contact-forms/

  2. Marinko
    Member
    Posted 3 years ago #

    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 :)

  3. leoahrens
    Member
    Posted 2 years ago #

    .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....

  4. davewgill
    Member
    Posted 2 years ago #

    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....

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Custom Contact Forms
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic