Return to previous page

Custom heading as button – change hover color background & text

This topic has 6 replies, 3 voices, and was last updated 5 years, 9 months ago ago by Rose Tyler

  • Avatar: Annet
    Annet
    Participant
    August 11, 2019 at 14:27

    Hi! To be able to use the custom font I’ve uploaded for my website you’ve advised me to use the custom heading for buttons. I’ve added a background color to the custom heading.

    1. The background color is not clickable, only the text is clickable
    2. I would like to change the background color on hover & the text color on hover

    How the ‘button’ looks now:
    https://prnt.sc/or817j

    #218909 Copied Theme version: 5.4
    5 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 11, 2019 at 14:35

    Hello,

    In this case, you need to use custom CSS code.
    Add a custom class for the Custom heading element, and code like this: 

    .my-custom-button a {
    padding: 8px 42px 3px;
}
.my-custom-button:hover {
    background-color: #3d635a !important;
    color: black !important;
}

    Regards

    #218910 Copied
    Avatar: Annet
    Annet
    Participant
    August 13, 2019 at 18:07

    Don’t know why but it’s not working :-S…. The color of the text changes to light grey while i’ve set it to dark grey!
    I did change button to heading, that’s correct right?

    #219037 Copied
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    August 13, 2019 at 20:36

    Hello,

    Check now. We have replaced heading by the button if you want to have bg color clickable.

    Regards

    #219061 Copied
    Avatar: Annet
    Annet
    Participant
    August 14, 2019 at 10:57

    Yes, great!

    #219096 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 14, 2019 at 11:01

    You’re welcome!

    Regards

    #219098 Copied
  • Viewing 6 results - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.Log in/Sign up

Recent Community Activity

Helpful Topics

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Mango – Responsive eCommerce PSD Template
lazy-placeholder
Restaurant – WordPress WooCommerce Theme
lazy-placeholder
Tea Store – WordPress WooCommerce Theme
lazy-placeholder
Grocery Mega Market – WordPress WooCommerce Theme
lazy-placeholder
Spa – WordPress WooCommerce Theme
lazy-placeholder
Zoo Shop – WooCommerce Theme
lazy-placeholder
Watches Store – WooCommerce Theme
lazy-placeholder
Organic Store 02 – WordPress WooCommerce Theme
lazy-placeholder
Flowers Store – WordPress WooCommerce Theme
lazy-placeholder
SEO Agency – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.