Animating CF7 Submit button

[Pbalazs89]

Hi there,

I would like to animate CF7’s button to change the bg color. Here’s the CSS I used:

@keyframes yourAnimation{
0%{
transform: rotate(xx);
background: #00CCFF;
}
100%{
transform: rotate(xx);
background: #003289;
}
}

.input[type=“submit”]:hover {
animation: yourAnimation 1.5s infinite 0s linear;
}

What am I missing here? And when should I use Keyframes and when should I use things like:

transition-property: all;
transition-duration: 300ms;
transition-timing-function: ease;

Thanks for the help!

[jade]

Hello @Pbalazs89,

The code you are trying to use seems correct except this part:

.input[type="submit"]:hover {
    animation: yourAnimation 1.5s infinite 0s linear;
}

Kindly remove the . before input since input is not a class name. Try using:

input[type="submit"]:hover {
    animation: yourAnimation 1.5s infinite 0s linear;
}

I have tried this in my setup and it works correctly.

Hope this helps.