Tagged: ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • July 31, 2025 at 2:10 pm #1487419
    pelgrimrat

    Dear people at the forum,

    I have a question considering an icon animation on this website:

    Home

    I created buttons with a “beating heart” icon, using this code:

    .buttonpulse a.avia-button .avia_button_icon {
    top: 1px;
    margin-right: -1em;
    padding-right: 25px;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
0% {font-size: 18px;}
50% {font-size: 22px;}
90% {font-size: 18px;}
100% {font-size: 18px;}
}

    I played around with the margin and padding so that the button itself (especiallly the border around it) doesn’t move when the heart icon is transforming.
    However, in Safari browser, the buttons are stretching horizontally when the icon increases in size. In Chrome, the buttons are staying the same, which is what I want.

    Do you know a CSS solution that will tackle Safari browsers as well?
    Thanks in advance!

    July 31, 2025 at 3:37 pm #1487422
    Guenni007

    on my end here there is on Version 18.5 (20621.2.5.11.8) no problem with your setting. No stretching of the buttons.

    August 1, 2025 at 6:04 am #1487443
    Ismael

    Hi,

    Thank you for the inquiry.

    Try to add this css code to fix the icon in place, preventing it from affecting the size of the button while animating.

    #top .buttonpulse a.avia-button .avia_button_icon {
    position: absolute;
    left: 30px;
    top: 15px;
}

#top .buttonpulse a.avia-button .avia_iconbox_title {
    padding-left: 15px;
}

    Let us know the result.

    Best regards,
    Ismael

    August 18, 2025 at 10:53 am #1488172
    pelgrimrat

    Hi Ismael,
    Thank you very much for your solution. It works perfectly.

    August 18, 2025 at 5:13 pm #1488192
    Rikard

    Hi,

    Great, I’m glad that Ismael could help you out. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘icon animation affects surrounding element’ is closed to new replies.