Button Field for Gridbox Content Apps

Button Field for Gridbox Content Apps
Mon. - Fri. 9 am - 5 pm Ask a Question
Remember me

Hover effect

2 years 9 months ago #1

  • Lisa's Avatar
  • 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

2 years 9 months ago #2

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 23518
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

2 years 9 months ago #3

  • Marats's Avatar
  • Marats
  • Posts: 413
А как сделать это для overlay - всплывающей секции?

2 years 9 months ago #4

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 23518
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

2 years 9 months ago #5

  • Lisa's Avatar
  • Lisa
  • Posts: 42
That's perfect! thank you so much!

How can I change the colour of the arrow?

2 years 9 months ago #6

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 23518
You need to find in code:
border-left: 20px solid #333;

and replace #333; to the color you need.

Regards,
Vyacheslav, Balbooa.com
Powered by Kunena Forum