How can I apply an animate.css effect to a button?

  • 7 April 2021
  • 6 replies
  • 223 views
M
Badge

Hey there

I have searched the community for an answer and have found options, but nothing that does exactly what I want.

I’d like to use the animate.css library to apply a flipinY effect to an Unbounce button with a graphic background on mouseover and a flipoutY on mouseout.

I have this function working on a static image on a test page (unpublished) using the script from Help trying to custom animate but I cannot work out how to link this to the button itself.

If someone could give me some pointers, I’d super appreciate it.

Thanks

6 replies

Jess
Rank
Userlevel 7
Badge +1

Since @Alex_Le is the author of that workaround you shared ^ he might be able to take a look. I’ll try to find some more options in the meantime – sit tight!

-Jess

Jess
Rank
Userlevel 7
Badge +1

Hey Mark, I’m back, I’ve been trying to frankenstein some different scripts together to try to get some of this functionality together.

So far I’ve been able to transition the background colour and rotate the button, but I have to jump into some other projects. This might give you a good jumping off point though, if you’re not afraid to start digging into some CSS.

button

Click here to see it in action.

And here are the steps to implement:

Step 1

Add jQuery 1.4.2 in the HEAD placement of your javascript:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Step 2

Copy and paste this into your stylesheet. Replace #lp-pom-button-211 with the ID of the button you’re styilng.

<style>
.gradient {    
  background: #74ebd5;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #ACB6E5, #74ebd5);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #ACB6E5, #74ebd5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
  
#lp-pom-button-211 {
  box-shadow: 0px 6px 15px 1px rgba(0,0,0,0.1);
      -webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
  -moz-transition: all .7s;
   -o-transition: all .7s;
   -webkit-transition: all .7s;
   transition: all .7s;
}

    #lp-pom-button-211:hover {
  	transform: scale(1.3,1.3) translateY(-20%) rotate(360deg);
    box-shadow: 0px 6px 30px 2px rgba(0,0,0,0.3);
    -ms-transform: scale(1.3,1.3) translateY(-20%) rotate(360deg);
    -moz-transform: scale(1.3,1.3) translateY(-20%) rotate(360deg);
    -webkit-transform: scale(1.3,1.3) translateY(-20%) rotate(360deg);
    -o-transform: scale(1.3,1.3) translateY(-20%) rotate(360deg);
  }
  
</style>

Hopefully this is somewhat helpful! Sorry I wasn’t able to dedicate more time to this today!

-Jess

M
Badge

Hey Jess

Wow, thanks so much for your time on this - really appreciate it.

The mechanism of what you’ve written here is definitely a good place to start, thanks. The effect I’m after is a flip - like how you’d turn over a playing card. I wonder if I can examine the CSS code in the animate.css library to apply the same to my button.

Thanks again and I’ll report back on how I get on.

Mark

M
Badge

Hey Jess

I have spent the morning trying to apply the concept you wrote, and I’m getting nowhere with it. I think I have isolated the CSS that applies the effect but the CSS code is far beyond my understanding.

Interestingly, though I can get the function to work by including the animate.css library and applying it as a class to the button element, just not specifically on hover.

Really not sure where I can go from here, but thanks for your time on it.

Mark

M
Badge

Quick update on this mini project.

I have found what is a fairly simple solution in CSS, but there are compromises. To achieve the horizontal flip effect I have created a button with a background image and changed the hover state to show a different image.

Then in a style sheet:

.flip {
transition: transform 1s;
transform-style: preserve-3d;
}
.flip:hover {
transform: rotateY(180deg);
}

The hover state image is created as a mirror image so when the rotateY effect plays it reverses the image to display correctly.

The compromise is that the image is displayed as soon as the button is hovered and the transition plays afterwards. I am looking into a way to change this.

Jess
Rank
Userlevel 7
Badge +1

That’s terrific Mark! Thanks for keeping things updated here. Once you’re satisfied with the animation, would you mind sharing the entire snippet of code? That way more folks from the community can benefit. 🙂

Let me know if I can help!

-Jess

Reply


Terms & ConditionsCookie settings