Tagged: ,

Viewing 3 posts - 1 through 3 (of 3 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

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.