Docs

[koosang153]

I would like to make my contact form 7 button with this effect.

http://zurb.com/playground/radioactive-buttons

@-webkit-keyframes greenPulse {
from { background-color: #749a02; -webkit-box-shadow: 0 0 9px #333; }
50% { background-color: #91bd09; -webkit-box-shadow: 0 0 18px #91bd09; }
to { background-color: #749a02; -webkit-box-shadow: 0 0 9px #333; }
}

a.green.button {
-webkit-animation-name: greenPulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}

How should I do that?

[koosang153]

This reply has been marked as private.

[Christian]

Hey there,

Please add the code below in your Appearance > Customize > Custom > Global CSS

@-webkit-keyframes greenPulse {
  from { background-color: #749a02; -webkit-box-shadow: 0 0 9px #333; }
  50% { background-color: #91bd09; -webkit-box-shadow: 0 0 18px #91bd09; }
  to { background-color: #749a02; -webkit-box-shadow: 0 0 9px #333; }
}

input.wpcf7-form-control.wpcf7-submit {
  -webkit-animation-name: greenPulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  border: 0;
  color: white;
}

Can you give us more details by what you mean by “the form button on my main page seems moving when it’s clicked”? It looks like it’s not moving when clicked.

Thanks.

[koosang153]

Thank you!!

[Christian]

You’re welcome.

[Author]

Posts