Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • April 15, 2014 at 3:01 pm #251629
    Blankito

    Hello everybody,
    I would like to use the animation of icons also for buttons. What is the way to do it?

    Thanks for your answers in advance,
    Markus

    April 15, 2014 at 11:10 pm #251844
    Yigit

    Hi Blankito!

    Please add following code to Quick CSS in Enfold theme options under Styling tab

    body div .avia-button:hover {
-webkit-animation: sonarEffect 1s ease-out;
-moz-animation: sonarEffect 1s ease-out;
animation: sonarEffect 1s ease-out;
}

    Best regards,
    Yigit

    April 15, 2014 at 11:31 pm #251851
    Blankito

    Hi Yigit,
    thank you very much. It works fine. But it wasn’t the animation I meant. For example if you make an Icon list. One Icon appears at a time and after another. I would like to have that animation for my buttons. So when I scroll the button appears on sight!

    Best regards,

    Blankito

    April 16, 2014 at 1:16 am #251879
    preludes

    Hi Yigit,

    I follow “Please add following code to Quick CSS in Enfold theme options under Styling tab” but after?

    What should I put in the “Optional TooltipAdd a tooltip for this Icon. The tooltip will appear on mouse over”

    THX

    April 16, 2014 at 12:31 pm #252047
    Ismael

    Hey!

    Thank you for using the theme!

    Please add this on Quick CSS or custom.css:

    .avia-button {
opacity: 0.1;
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
}

.avia-button {
-webkit-animation: avia_appear 1s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
-moz-animation: avia_appear 1s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
animation: avia_appear 1s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
opacity: 1;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}

    Best regards,
    Ismael

    September 9, 2014 at 10:26 pm #316126
    microhound
    This reply has been marked as private.
    September 10, 2014 at 1:09 pm #316513
    Yigit

    Hey!

    Have you tried your buttons on a colored background ( not white )?

    Best regards,
    Yigit

    September 10, 2014 at 2:46 pm #316619
    microhound

    Does this code go in the quick css area? They are grey buttons attached is a preview.

    Here is the link for the preview

    http://hoist-crane.com/wp-content/uploads/2014/09/Untitled-2.jpg

    September 11, 2014 at 10:54 am #317265
    Ismael

    Hi!

    They are not buttons, you’re using an icon shortcode. They should have this animation by default. Please create a new thread if you’re having any issues with the icon element. I’ll close this thread.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Use Icon Animation for Buttons’ is closed to new replies.