Button style on different pages

[guentherportfolio]

Hi,

I am trying to have one similar button style on all pages. Is it possible to make some changes to have a similar look? At the moment, there are different styles due woocommerce, the theme and the fact that the theme tries to overwrite the button classes on different pages and plugins.

I attached 4 screenshots with 4 different buttons. Do you have some hints, what could I change, to have one button style? At the moment, the theme overwrites the classes of third party plugins too, but not at all, so the result is different on every page.

p.s. unfortunately I do not have deeper knowledge about code changes and so on.

Thanks in advance.

Best
Martin

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Please supply the URL(s) for each instance where you see the above.

Thanks.

[guentherportfolio]

This reply has been marked as private.

[David Martin – Support]

Hi,

Please use this:

.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
    outline: none;
    border: none;
    padding: 8px 14px 7px 14px;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.track_order p.form-row input[type="submit"] {
    background-color: #ff6633!important;
}
.track_order p.form-row input[type="submit"]:hover {
    background-color: #2e2e36!important;
}

Thanks.

[guentherportfolio]

Thank you so far, David. It is changing some things, but the order tracking button isn´t rounded at the moment. Further, it changes the color on mouse over, what it shouldn’t do, because the other buttons only change from rounded corners to edged corners on hover. Is it possible to change this? Thank you

Regards
Martin

[David Martin – Support]

Is the login still valid and working as I get a blank page? http://d.pr/i/APm0.

Please confirm what color you want for:

Button Standard:
Button Hover:

– You want the border to always be rounded correct?

Thanks.

[guentherportfolio]

Hi David,

Actually yes. Please try it again,it shall work.

The preferred color for the standard button is: black
Fo the hover button: actually black too, but with the rounded corner effect. Otherwise if it is changing the color too, #ff6633 would be nice.

The border could be with edges in “standard” and when I make a mouse over it shall change to rounded border. I really appreciate your help. Thanks in advance

Regards
Martin

[David Martin – Support]

Hi,

To change the button color to black, please use this:

.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
    outline: none;
    border: none;
    padding: 8px 14px 7px 14px;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.track_order p.form-row input[type="submit"] {
    background-color: #000!important;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.track_order p.form-row input[type="submit"]:hover {
    background-color: #000!important;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

[guentherportfolio]

Hi David,

thanks for your help. Unfortunately it doesn’t work like it should do. The button of the order tracking is black and rounded, but it doesn’t has a hover effect. It is still black and rounded, if I am hover with the mouse.The color is not the problem…more the hover effect. It shall look like all other buttons on the page. thanks

Martin

[David Martin – Support]

Hi,

What is the order tracking page URL, I’ll give you additional CSS for that.

Thanks.

[guentherportfolio]

Thank you. The url is http://nicebeardgraphics.com/bestellstatus/

Regards
Martin

[Mohammad – SUPPORT]

Hi,
Your website is under maintnance mode. How can i check the website?
Thanks
Mohammad

[guentherportfolio]

This reply has been marked as private.

[David Martin – Support]

Hi,

To add the orange hover color, please use this:

.track_order p.form-row input[type="submit"]:hover {
    background-color: #ff6633!important;
}

Thanks.

[guentherportfolio]

Thanks David,

I actually don´t want a orange hover 🙂 I would like to have the actual hover effect, which you can see on you pricing tables. (http://neighborhood.swiftideas.com/shortcodes/pricing-tables/). Slide over the button and the corners will be rounded. This is what i am looking for. Thanks in advance

Best
Martin