Balbooa Help Center: Hover effect (1/1)

3 years 7 months ago #1

Lisa Posts: 42	Hi there! I was wondering if this is possible? I'd like to be able to add an arrow when hovering over a button. gph.is/g/aRgmjld
	The administrator has disabled public write access.

3 years 7 months ago #2

Vyacheslav
Posts: 27059

Hello,
Thank you for contacting us

You need to add class custom-button for your button.
And in the code editor add CSS:

.custom-button .ba-btn-transition {
    position: relative;
}

.custom-button .ba-btn-transition:before {
    content: "";
    border: 20px solid transparent;
    border-left: 20px solid #333;
    box-sizing: border-box;
    height: 20px;
    left: -20px;
    position: absolute;
    width: 20px;
    transition: .3s;
    opacity: 0;
}

.custom-button .ba-btn-transition:hover:before {
    opacity: 1;
}

Regards,
Vyacheslav, Balbooa.com

3 years 7 months ago #3

Marats Posts: 413	А как сделать это для overlay - всплывающей секции?
	The administrator has disabled public write access.

3 years 7 months ago #4

Vyacheslav Posts: 27059	Hello, Thank you for contacting us How to do this is described above (you need to add a class for the button and add code.) Please write in English topics in English. Regards, Vyacheslav, Balbooa.com
	The administrator has disabled public write access.

3 years 7 months ago #5

Lisa Posts: 42	That's perfect! thank you so much! How can I change the colour of the arrow?
	The administrator has disabled public write access.

3 years 7 months ago #6

Vyacheslav Posts: 27059	You need to find in code: border-left: 20px solid #333; and replace #333; to the color you need. Regards, Vyacheslav, Balbooa.com
	The administrator has disabled public write access.