Button hover expands with graphic

[lisacreatives]

Hi Themeco,

While creating a new website I’m trying to create a new button style that when I hover the graphic becomes visible.

This solution I did with making the graphic transparant at first and interaction with color. I also tried some code, but it didn’t work for me.

I got stuck at the point where there is no hover the text needs to be centered. I’m also afraid the solution I now used is not the perfect one.

Could you maybe help me out if this is possible and how? I couldn’t find the solution on the forum yet.

Without hover (too much padding on the right)

With hover

Hope you can help, thank you in advance!

[prakash_s]

Hello @lisacreatives,

Thanks for writing to us.

I would suggest adding a Button element and setting the graphic icon on the button. Then go to the Customize tab of the Button element → Element CSS and add this custom CSS code.

$el.x-anchor-button.has-graphic span.x-graphic {
display: none;
}

$el.x-anchor-button.has-graphic:hover span.x-graphic {
display: block;
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector. If you have no idea about coding, you can subscribe to One, where customization questions are answered.

Hope it helps.
Thanks

[lisacreatives]

Thank you so much for your help. It works perfectly. I added some CSS details myself and it’s the perfect button now.

[prakash_s]

You are most welcome, @lisacreatives