WordPress.org

Ready to get started?Download WordPress

Forums

Custom Contact Forms
Customize button (4 posts)

  1. grisgo
    Member
    Posted 2 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 2 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 1 year 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 1 year 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

About this Topic