Show icon on button

[WebMount]

Hi there,

Hopefully you can help me further. For the button, we only want an icon on hover and focus. For instance:

Static:

Hover / focus:

How can we do this?

Kind regards,
Chris

[friech]

Hi Chris,

Thank you for writing in, first please enable the Advance Mode, this will enable you to see all the options on elements.

Then on your Button element, 1) enable the Secondary Graphic Icon, then 2) set the primary icon color to transparent.

• 

Hope it helps,
Cheers!

[WebMount]

Hi,

That could be a solution. Only the padding is then incorrect:

Is there a way to prevent that? That the button only gets bigger when hover?
Like the images in de first post.

[christian]

Hey Chris,

With custom CSS, it’s possible. I’ll give you an example for you to learn how to use the Element CSS and also you could see the graphic icon class.

Add this code in the Button’s Element CSS.

$el .x-graphic {
    display: none;
}
$el:hover .x-graphic {
    display: block;
}

If you know CSS, you can upgrade that to achieve a subtle effect like in this screencast: https://youtu.be/f4EFZk1v1eg

I’ll provide the code in that video but please understand that custom coding is beyond the scope of our theme support. My goal is only to show you what is possible. In case you more effects or wish to enhance the code and you don’t know CSS, you need to hire a web developer and show him how the Element CSS works.

$el .x-graphic {
    width: 0;
  	opacity: 0;
    transform:translateX(-1em);
    transition: all 0.2s
}
$el:hover .x-graphic {
    width: 1.25em;
  	opacity: 1;
    transform:translateX(0);
}

Here’s another Element CSS tutorial from our official Youtube channel: https://youtu.be/YSs67E5EL9o

Hope that helps.