Hey gang, back with another question. I am chasing down buttons and form fields everywhere on my site trying to make them all the same. Woocommerce buttons and forms, regular buttons and forms, it’s a major pain. Is there some bit of CSS that will just normalize them all? Like a button or form field class that they all share that will allow us to make them consistent? Thank you!
Hi There,
You can try with this selector: .x-btn, .button, [type="submit"].
The custom CSS should be like this:
.x-btn, .button, [type="submit"] {
color: #333333;
border-color: #333333;
background-color: #000000;
border-width: 3px;
text-transform: uppercase;
background-color: transparent;
}
If you still have the issues, please provide us with the URL contains the buttons, so we can take a closer look.
Hope it helps 
Thank you Thai! Here’s where I’m at, and I’m probably not doing something simple right. I used your code, added a lot of stuff to it, have !Important all over the place and probably lines I don’t even need in there making it too complicated. All of the site buttons and woo buttons are now, finally identical, but for one problem - the woo my account page buttons. You can see below what I’ve done to try to fix it, but if the text on the button shows up the transition color doesn’t change when you hover over it, and if I change it to the hover working, the text doesn’t show. I appreciate any help, and if you tell me how to clean the CSS up I’ll post it so people can make all of their buttons identical site-wide.
Thanks again, you are such a big help!
/* regular site buttons */
.x-btn, .button, [type=“submit”] {
color: #ffffff !Important;
background-color: #008ece !Important;
border: none !Important;
text-transform: uppercase !Important;
text-shadow: none !Important;
border-radius: 4px !Important;
padding: 20px 40px 20px 40px !Important;
}
.x-btn:hover, .button:hover, [type=“submit”]:hover {
color: #ffffff !Important;
background-color: #00a2e6 !Important;
border: none !Important;
text-transform: uppercase !Important;
text-shadow: none !Important;
border-radius: 4px !Important;
padding: 20px 40px 20px 40px !Important;
}
/* end regular site buttons */
/* woocommerce buttons */
.woocommerce-MyAccount-navigation-link a {
color: #ffffff !Important;
font-size: 16px !Important;
background-color: #008ece !Important;
border: none !Important;
text-transform: uppercase !Important;
text-shadow: none !Important;
border-radius: 4px !Important;
padding: 20px 40px 20px 40px !Important;
line-height: 1.3 !Important;
}
.woocommerce-MyAccount-navigation-link a:hover {
color: #ffffff;
font-size: 16px;
background-color: #00a2e6;
border: none;
text-transform: uppercase;
text-shadow: none;
border-radius: 4px;
padding: 20px 40px 20px 40px !Important;
line-height: 1.3 !Important;
}
.woocommerce-MyAccount-navigation-link a:before {
color: #ffffff !Important;
display: block !Important;
position: absolute !Important;
top: 0 !Important;
left: 0 !Important;
right: 0 !Important;
bottom: 0 !Important;
font-size: 16px !Important;
text-transform: uppercase !Important;
text-shadow: none !Important;
border: none !Important;
border-radius: 4px !Important;
background-color: #008ece !Important;
opacity: 1 !Important;
transform: none !Important;
transition: none !Important;
padding: 20px 40px 20px 40px !Important;
content: none !Important;
line-height: 1.3 !Important;
}
.woocommerce-MyAccount-navigation-link a:hover:before {
color: #ffffff !Important;
display: block !Important;
position: absolute !Important;
top: 0 !Important;
left: 0 !Important;
right: 0 !Important;
bottom: 0 !Important;
font-size: 16px !Important;
text-transform: uppercase !Important;
text-shadow: none !Important;
border: none !Important;
border-radius: 4px !Important;
background-color: #00a2e6 !Important;
opacity: 1 !Important;
transform: none !Important;
transition: none !Important;
padding: 20px 40px 20px 40px !Important;
content: none !Important;
line-height: 1.3 !Important;
}
/* end woocommerce buttons */
Hello There,
You can make use of this site: http://csslint.net/ to clean and tidy up your custom css.
We could not check your my account page. Could you please provide us access to your site so that we can log in and take a closer look? To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288
Thank you.
Thank you! Secure note below…
Hello There,
Thanks for providing the information. The issue lies in your css.
For example:
.woocommerce-MyAccount-navigation-link a {
color: #ffffff !Important;
font-size: 16px !Important;
background-color: #008ece !Important;
border: none !Important;
text-transform: uppercase !Important;
text-shadow: none !Important;
border-radius: 4px !Important;
padding: 20px 40px 20px 40px !Important;
line-height: 1.3 !Important;
}
.woocommerce-MyAccount-navigation-link a:hover {
color: #ffffff;
font-size: 16px;
background-color: #00a2e6;
border: none;
text-transform: uppercase;
text-shadow: none;
border-radius: 4px;
padding: 20px 40px 20px 40px !Important;
line-height: 1.3 !Important;
}
The css style that has !important in it will be strictly implemented superseding the styling you have set. You must update your code and make it something like this:
.woocommerce-MyAccount-navigation-link a {
color: #ffffff !Important;
font-size: 16px !Important;
background-color: #008ece !Important;
border: none !Important;
text-transform: uppercase !Important;
text-shadow: none !Important;
border-radius: 4px !Important;
padding: 20px 40px 20px 40px !Important;
line-height: 1.3 !Important;
}
.woocommerce-MyAccount-navigation-link a:hover {
color: #ffffff !Important;
font-size: 16px !Important;
background-color: #00a2e6 !Important;
border: none !Important;
text-transform: uppercase !Important;
text-shadow: none !Important;
border-radius: 4px !Important;
padding: 20px 40px 20px 40px !Important;
line-height: 1.3 !Important;
}
Hope this helps. Please let us know how it goes.
Thank you so much for the help! I’m about to start in on the form fields. The buttons are handled, and if anyone needs it, I believe the below CSS makes all of your site buttons including WooCommerce identical:
/* all buttons */
/* regular site buttons */
.x-btn, .button, [type=“submit”] {
color: #ffffff;
background-color: #008ece;
border: none;
text-transform: uppercase;
text-shadow: none;
border-radius: 4px;
padding: 20px 40px 20px 40px;
}
.x-btn:hover, .button:hover, [type=“submit”]:hover {
color: #ffffff;
background-color: #00a2e6;
border: none;
text-transform: uppercase;
text-shadow: none;
border-radius: 4px;
padding: 20px 40px 20px 40px;
}
/* end regular site buttons */
/* woocommerce buttons */
.woocommerce-MyAccount-navigation-link a {
color: #ffffff;
font-size: 16px;
background-color: #008ece;
border: none;
text-transform: uppercase;
text-shadow: none;
border-radius: 4px;
padding: 20px 40px 20px 40px;
line-height: 1.3;
}
.woocommerce-MyAccount-navigation-link a:hover {
color: #ffffff;
font-size: 16px;
background-color: #00a2e6;
border: none;
text-transform: uppercase;
text-shadow: none;
border-radius: 4px;
padding: 20px 40px 20px 40px;
line-height: 1.3;
}
.woocommerce-MyAccount-navigation-link a:before {
color: #ffffff;
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-size: 16px;
text-transform: uppercase;
text-shadow: none;
border: none;
border-radius: 4px;
background-color: #008ece;
opacity: 1;
transform: none;
transition: none;
padding: 20px 40px 20px 40px;
content: none;
line-height: 1.3;
}
.woocommerce-MyAccount-navigation-link a:hover:before {
color: #ffffff;
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-size: 16px;
text-transform: uppercase;
text-shadow: none;
border: none;
border-radius: 4px;
background-color: #00a2e6;
opacity: 1;
transform: none;
transition: none;
padding: 20px 40px 20px 40px;
content: none;
line-height: 1.3;
}
.woocommerce .button.product_type_simple:before, .woocommerce .button.single_add_to_cart_button:before, .woocommerce-page .button.product_type_simple:before, .woocommerce-page .button.single_add_to_cart_button:before {
content: “”;
}
/* end woocommerce buttons */
/* end all buttons */
You are most welcome.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.