Contact Form Button CSS

  • Marcipu

    (@marcipu)


    11 years, 3 months ago

    Hey everybody,

    Description
    I have a contact form with a back and a submit button as you can see for example on this page http://freilichtkino.ch/wordpress/?p=318

    What I want
    Back and submit button should have exactly the same style.

    Problem
    Virtue provides standart CSS for the submit button in contact form 7 but not for the back button.

    What I did so far
    I entered some customized code for the back and submit button to make it look more similar (Background-Color, Font-Color, Hover) but I realized that there would be much more to change like font style and size of the buttons and im sure there is an easyser way to do that than with customizing all of this parameter.

    What I think could be the solution
    What I need is some css custom snippet which either says something like: “Back-button you can take all the stylings from the submit button” or “Submit-button delete all the predefined styling” or third options virtue theme ads to the next uptdate a styling for the back button as well ;-).

    Huff, I hope you could follow me and I didnt confuse you.

    Thanks in advance for all your effort.

    Best wishes from Switzerland
    Marc

Viewing 3 replies - 1 through 3 (of 3 total)
  • Ben Ritner – Kadence WP

    (@britner)

    11 years, 3 months ago

    Hey,
    Not seeing a contact form on the link above?

    Is there something I need to do to see it?

    Kadence Themes

    Thread Starter Marcipu

    (@marcipu)

    11 years, 3 months ago

    Hey kadence themes,

    My mistake! Do to the fact that it is a multi step contact form you have to chose first either option 1 or two on this page http://freilichtkino.ch/wordpress/?page_id=351 and than press submit (weiter). Now you should be on the second page where you can find again a submit button (weiter) and the back button (zurück) i was speaking about.

    best wishes marc

    Ben Ritner – Kadence WP

    (@britner)

    11 years, 3 months ago

    ok, I’ll have to add on some css for contact for back, for now you can add this:

    .wpcf7 input.wpcf7-back {
  padding: 12px 18px;
  font-size: 12px;
  border: none;
  display: inline-block;
  color: #fff;
  transition: background .6s ease-out;
  -webkit-transition: background .6s ease-out;
  -moz-transition: background .6s ease-out;
  -o-transition: background .6s ease-out;
}

    Kadence Themes

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

The topic ‘Contact Form Button CSS’ is closed to new replies.