[mertkahraman42Participant]

Hi,

My URL: http://www.buzzdeeds.com/contact-us/
WP Version: 4.2.2
Theme: Integrity 1 Child Theme

I would like to fully customize (e.g. size, color and location) of my contact form 7 button without changing the styling of other buttons my website. That said, I added a custom class to my contact form 7 called ‘contactFormSendButton’ .

Could you, please, help me out how I can customize this specific button? For instance, how can I place it on the right instead of left?

Also, how can I disable this shadowy (3D effect) on flat button texts? I would like text of my buttons to look like buttons on this webpage: https://creativevip.net/resource/flat-buttons
Or, the buttons should look like the ‘Submit’ button on X’s Create New Topic Support Center Page.

Best.

[FriechModerator]

Hi There,

Thanks for writing in! Good thing you did add an class to this button. You can control this button styling by defining the class contactFormSendButton

e.g.

.contactFormSendButton {
  float: right; /*place button to right*/
  background-color: blue;
  border-color: black; 
  font-size: 18px;
  font-weight: 100; /*100 light - 900 bolder*/
}

Do you mean the shadowy (3D effect) on button hover? Set the text-shadow property value to none

.contactFormSendButton:hover {
  text-shadow: none !important;
}

Hope it helps, Cheers!

[mertkahraman42Participant]

How can I this button button a large or x-large button in terms of X button sizes?

Best.

[LelyModerator]

Hello There,

To copy the style of x-large button, please edit above CSS to this:

.contactFormSendButton {
  float: right; /*place button to right*/
  background-color: blue;
  border-color: black; 
  font-weight: 100; /*100 light - 900 bolder*/
  padding: 0.579em 1.105em 0.842em; /*large button style*/
  font-size: 19px; /*large button style*/
}

Hope this helps.
Thanks.

[Ashley HParticipant]

Ok, dumb question…where do I add the custom CSS class? I tried under Body CSS and in contact form 7’s additional settings space, but nothing seems to work.

http://www.almum.com

Thanks!!

[ChristopherModerator]

Hi there,

Please provide us with your site’s URL which uses X.

Thanks.

[Ashley HParticipant]

Hi…I provided the url…www.alamum.com

[ChristopherModerator]

Hi there,

Please check the screen shot to know how to add a class name:

If it doesn’t help since your site is under construction mode, please open a new topic and provide us with URL of page in question and login credentials.

Thanks.

[Author]

Posts