Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 20, 2020 at 5:56 pm #1176371
    mmsdev

    Hi.

    Two Questions.

    1: I would like to change the hover colour of the small standard buttons.

    I have used this by adding a class and then using the class in the developer section as per element, all works very well.

    /*Button Hover Effect*/
    .button-hover-effect .avia-button:hover {
    background-color: #000000!important;
    }
    /*Button Hover Effect remove boarder*/
    .avia-button {
    border: none!important;
    }

    2: I now want to change all the small button on site and just use the class i have created to target individual buttons as it is intended.

    I have used this.

    /*Button Hover Effect*/
    .avia-button:hover {
    background-color: #ffffff !important;
    color: #e800dc !important;

    This again works but.

    1: It changes the full width buttons as well and that is not required as you can do that with the full width button element

    2: It does effect the title text on the buttons i have used the class on though not the hover colour just the text

    January 21, 2020 at 6:14 am #1176562
    Rikard

    Hey mmsdev,

    Could you post a link to where we can see an example of the button your would like to alter globally please?

    Best regards,
    Rikard

    January 21, 2020 at 5:10 pm #1176839
    mmsdev

    hi.

    It just the small standard enfold button..

    Please check al the button on this page..

    January 23, 2020 at 3:32 am #1177366
    Rikard

    Hi,

    Thanks for that, but I can only see large and medium buttons on the front page. Which one in particular are you trying to target?

    Best regards,
    Rikard

    January 23, 2020 at 1:04 pm #1177589
    mmsdev

    Sorry I was not clear,

    All buttons sizes that are the standard enfold button element – Not the full width button.

    I use various sizes , small, medium, large – You are correct there is no small button on the site currently but intend to use one at some point too.

    January 23, 2020 at 5:27 pm #1177764
    Yigit

    Hey,

    Please try using the code as following to target small sized buttons 

    
.avia-button.avia-size-small:hover {
background-color: #ffffff !important;
color: #e800dc !important;
}

    Regards,
    Yigit

    January 24, 2020 at 11:58 am #1178088
    mmsdev

    Thats done it, many thanks

    January 24, 2020 at 2:21 pm #1178117
    Yigit

    Hi,

    You are welcome! Let us know if you have any other questions or issues and enjoy your weekend! :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Change small button hover colour’ is closed to new replies.