Links and hovers w/ Buttons

  • jadams1974

    (@jadams1974)


    10 years ago

    I am going crazy, I have been sitting here for 8 hours and i cannot figure this out. Please huge thanks to who can help.

    site url: https://test.riverwalkpizzeria.com

    BIGGEST ISSUE!

    i have black buttons with red text (I WANT WHITE TEXT), when you hover over the button it turns red with red text (I want the text to stay white).
    this is for the buttons in the header and the three buttons on the home page in body. How can i do this without changing the red links in the footer and throughout the pages?

    PLEASE, I AM desperate! Thank you

Viewing 4 replies - 1 through 4 (of 4 total)
  • BuenaPalomeno

    (@buenapalomeno)

    Hello there, jadams1974!

    Add this code at the end of your theme’s style.css:

    a.button {
    color: #fff;
    }
    and
    a.button:hover {
    color: #fff;
    }

    see if it works.

    Thread Starter jadams1974

    (@jadams1974)

    No, unfortunately it did not. Any other ideas? And thank you so much for trying to help..

    WPyogi

    (@wpyogi)

    You might want to check on some of these CSS errors – in your CSS (ignore the ones that are part of the theme):

    https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Ftest.riverwalkpizzeria.com%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

    Thread Starter jadams1974

    (@jadams1974)

    I checked that. I removed all of the button css the link css and inserted the following.

    button,
a.button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
padding: 8px 15px;
color: #fff;
font-size: 1.2em;
font-weight: 400;
font-family: "Yanone Kaffeesatz", Arial, Helvetica, sans-serif;
line-height: 20px;
text-transform: uppercase;
background: #060608;
border: 1px solid #060608;
}
button:hover,
a.button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
background: #f80808;
border-color: #ff2828;
}

links
a {
color: #f80808;
outline: none;
-webkit-transition: all 0.14s ease 0s;
  -moz-transition: all 0.14s ease 0s;
-o-transition: all 0.14s ease 0s;
}
a:visited {
color: #fff;
}
a:hover,
a:focus,
a:active {
color: #fff;
}

a.button {
color: #fff;
}
a.button:hover {
color: #fff;
}

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Links and hovers w/ Buttons’ is closed to new replies.