[KarenParticipant]

Hi there,
yesterday I looked at all the stunning effects made with X-Theme, shown in this article:
http://winningwp.com/examples-of-sites-built-with-the-wordpress-x-theme-by-themeco/

One of the sites (www.maltekebbel.de) has a special effect concerning the buttons. When you hover over the button with the mouse they “move” and get a little larger. (This is really hard to explain when you are no native speaker!)
I would like to know how I can achieve this effect. (In Customizer I couldn’t find anything and a search in forum didn’t get me anywhere as I don’t know the correct terms of my issue….)

Thanks in advance and regards
Karen

[ChristopherModerator]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

@-webkit-keyframes pulse{
from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05);}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}}@keyframes pulse{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05);}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}
}

a.x-btn:hover {
    -webkit-animation-name: pulse;
    animation-name: pulse;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

Hope that helps.

[KarenParticipant]

Oh wow! That’s great – and it works 🙂
Thank you very much!

PS, one more thing: when I click one of my buttons, the page jumps up to the beginning. Is there a way of stopping that?

[NicoModerator]

Hi There,

Would you mind sharing us the screenshot of the button that is jumping up to the beginning.

Thanks.

[KarenParticipant]

Hi there,
every button does that – except one.
I tried to figure it out and at least can imagine the reason: The buttons in question are not linked anywhere. They are a decorative reminder of my phone number down at the end of a page, no link behind.
The perfect solution would be: click the button, nothing happens. Is that possible?

Regards and thanks, Karen

[FriechModerator]

Hi Karen,

Please add this on your Custom CSS on Customizer.

.not-link {
  pointer-events: none !important;
}

Then apply the class not-link to your button.

Hope it helps, Cheers!

[KarenParticipant]

Hi Friech,
applying that CSS and “not-link” knocked out every animation and color change when hovering over the button.
Would there be a way of keeping color change/animation AND not jumping to the beginning of the page when klicking the button?

Grateful for any idea,
Karen

[LelyModerator]

Hi Karen,

Please try adding the following code instead on Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($) {
   $( ".disable-link" ).click(function( event ) {
       event.preventDefault();
   });
});

Then add disable-link on the button class field.

Hope this helps.

[KarenParticipant]

Hi Lely,
yay, that’s it, you made my day 🙂

Thanks so much!

[Paul RModerator]

You’re welcome! 🙂

[KarenParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

Please add this on your Custom CSS on Customizer.

.my-prompt .x-prompt-section-message {
	width: 100%;
	display: block;
	font-family: "Open Sans",serif;
	font-size: 15px;
}
.my-prompt .x-prompt-section-button {
	display: block;
	margin-top: 10px;
}

Then add the class my-prompt on your prompt element.

I wonder what time it is at Themeco location?
I’m sorry I couldn’t answer this accurately since we’re from different parts of the World.

If the CSS did not work, please provide us the page’s URL.

Thanks.

[KarenParticipant]

Good morning,
thank you, mainly it worked and we’re pretty close! Only the button is doing funny things, both words should be in one line of course.
Please have another look.

Thank you!
Regards, Karen

[ChristopherModerator]

Hi there,

Please provide us with URL of page in question.

Thanks.

[KarenParticipant]

This reply has been marked as private.

[Author]

Posts