[ZerotoOneParticipant]

Hey the,
I’d like to create such an animated button as seen below the contact form on the bottom of this page. thanks for your help, u are doing a great job!

[LelyModerator]

Hello There,

Thanks for posting in. To have the same button effect, please add the following CSS code in your Customizer via Appearance > Customize > Custom > CSS:.

.animated-btn{
  color: #f44e04;
  background: transparent;
  -webkit-transition-property: all;
  -webkit-transition-duration: 300ms;
  -webkit-transition-timing-function: ease;
  -moz-transition-property: all;
  -moz-transition-duration: 300ms;
  -moz-transition-timing-function: ease;
  -ms-transition-property: all;
  -ms-transition-duration: 300ms;
  -ms-transition-timing-function: ease;
  -o-transition-property: all;
  -o-transition-duration: 300ms;
  -o-transition-timing-function: ease;
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: ease;
  display: inline-block;
  width: auto !important;
  border: 3px solid #f44e04;
  padding: 0 20px;
  text-transform: uppercase;
}
.animated-btn:hover{
  background: #f44e04;
  color: #fff;
  padding: 0 40px;
}

Then add the class animated-btn to your button like below:

<a target="_blank" href="http://create.visage.co" class="animated-btn">Beta Login</a>
OR
<input class="animated-btn" type="submit" value="Let it Fly" data-default-text="Let it Fly" data-action-text="Sending">

Hope this helps.

[ZerotoOneParticipant]

well I added the code and set the class to .btn you can see the bottom on the last section of my page http://zerotoone.de, the button was animated in the previewed of cornerstone. on the actual site the class of the button got overwritten and it isn’t animated?? however the animation is not the same as on the page above, since the height of the button is reduced on hover.
thanks for your help 🙂

[LelyModerator]

Hello There,

The CSS is not working because you have syntax error.
There’s missing close bracket on your Custom CSS. Please look for this part on your custom CSS:

@media (max-width: 1200px){
#x-content-band-5 .x-img img {
  max-width: 80%;
  margin: 25px auto;
}

Add another closing bracket like below:

@media (max-width: 1200px){
#x-content-band-5 .x-img img {
  max-width: 80%;
  margin: 25px auto;
}
}

Hope this helps.

[ZerotoOneParticipant]

But how about the actual animation? Its Not the was it should be :/ thank you!

[LelyModerator]

Hello There,

Please edit the CSS for hover effect to this:

.x-btn:hover {
  background: #f44e04;
  color: #fff;
  padding: 0.563em 40px 0.813em;
  border: 3px solid #f44e04;
}

Thank you.

[Author]

Posts