Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • December 12, 2020 at 5:54 pm #1266788
    Talker77

    Hello support team,
    i have buttons where the hoover effect doesn’t look good (see screenshot) … how can i change it?

    December 13, 2020 at 12:39 am #1266825
    Jordan Shannon

    Hey Talker77,

    Do you just need to adjust the colors?

    Best regards,
    Jordan Shannon

    December 13, 2020 at 1:10 pm #1266887
    Talker77

    In the screenshot you can see that Hoover also has settings for passing … there is a white, transparent background?
    How can I set it so that Hoover has a colored border but the button itself is white?

    December 16, 2020 at 4:10 am #1267638
    Ismael

    Hi,

    You can use this css code to apply a border around the button on mouse hover.

    #top .avia-button:hover .avia_button_background {
	border: 1px solid green !important;
}

    But you have to adjust this css code, and remove the top margin.

    .second-button .avia-button {
	border: 10px solid #FFF !important;
	z-index: 2;
	z-index: 2;
	float: none !important;
	margin-top: -35px;
}

    Then add this css code to pull the button upwards.

    .second-button {
	top: -35px;
	position: relative;
}

    Best regards,
    Ismael

    December 16, 2020 at 12:24 pm #1267760
    Talker77

    Okay…we are one step further! Well…;-)
    When I hover the mouse over the button, the Hoover effect is displayed as desired … but the old button still shines through in the background (Screenshot). How do I get the way?

    December 16, 2020 at 5:06 pm #1267894
    Yigit

    Hey,

    You can add following code to Quick CSS to remove background color on hover 

    .second-button .avia-button:hover {
    background-color: transparent !important;
}

    Cheers!
    Yigit

    December 16, 2020 at 6:55 pm #1267916
    Talker77

    It worked, thanks.
    With other buttons (for example on URL) I don’t have an extra CCS class … how can I use the same properties there?

    December 18, 2020 at 3:44 am #1268293
    Jordan Shannon

    Hi,

    You can add a custom class or try and find another unique identifier near it. Either within the button or the div that houses it.

    Best regards,
    Jordan Shannon

    December 18, 2020 at 2:42 pm #1268416
    Talker77

    Okay, we have it … :-)
    Last question … the hover effect has a slight transparency (see screenshot) … how do I get rid of it?

    December 19, 2020 at 1:22 am #1268535
    Jordan Shannon

    Hi,

    Add this to quick css:

    #top .avia-button:hover .avia_button_background {
    opacity: 0!important;
}

    Best regards,
    Jordan Shannon

    December 21, 2020 at 12:59 am #1268901
    Talker77

    Thanks a lot Jordan, we can close the topic!

    December 22, 2020 at 4:52 am #1269220
    Ismael

    Hi,

    Alright! Glad we could be of help. Please do not hesitate to open a new thread if you need anything else.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Hoover Button’ is closed to new replies.