Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 14, 2021 at 12:00 pm #1272370
    pacopradas

    Hi,
    Hi, I need to change the background and text color of a button when I hover over it on the same page.Change the color and text in several buttons when hovering the mouse on the same page

    I want to make several buttons:

    1- White background black text and change to black background white text
    2- White background black text and change to blue background white text
    3- White background black text and change to orange background white text
    4- White ……… etc

    In the button configuration it is not possible to make these changes, I can only change the background color but not the text color when hovering over it…
    Any suggestions … thank you very much from Barcelona

    • This topic was modified 3 years, 10 months ago by pacopradas.
    January 16, 2021 at 5:44 am #1272861
    Rikard

    Hey Francisco,

    You add custom classes to your buttons in the advanced tab of the element options. Then you can use CSS like this:

    .black-hover .avia-button:hover {
  background-color: red;
}

    If you need further help then please post a link to where we can see the actual elements on your site.

    Best regards,
    Rikard

    January 16, 2021 at 9:33 pm #1272960
    pacopradas

    Hi, I’ve been there for two weeks and I can’t get the buttons right. I send the link of the page where I am doing the tests,
    the background color changes but the text is still black and would have to change to white.

    text-buttons

    Best regards,
    Francisco

    • This reply was modified 3 years, 10 months ago by pacopradas.
    January 17, 2021 at 6:35 pm #1273122
    Victoria

    Hi pacopradas,

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Best regards,
    Victoria

    January 20, 2021 at 11:02 pm #1274237
    pacopradas

    Hello Victoria, I have sent the access of my website for you, have you been able to see how to make the buttons?

    January 22, 2021 at 3:54 am #1274573
    Rikard

    Hi Francisco,

    Thanks for the update. In response to your screenshot; don’t put the CSS block in there, only the class should go in that field:

    black-hover

    Then put this in Quick CSS:

    .black-hover .avia-button:hover {
  background-color: red;
}

    Then you can change the class for the next element, the class could be called white-hover for example.

    Please try that out to see if you have any luck with it. If you need further help, then please post login details to your site in private, I can’t see any login details in this thread.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.