So I have a button with fill color, and when in hover mode, i want it to have white color fill and blue borders. If i don’t add transparent borders of the same size on the normal mode, it jumps when in hover mode. If I do add the transparent border, I have this weird artifact around it in normal mode…
If any of you know why, that would be tremendously helpful !
Thank you
Example : Webflow library with buttons working the way I want (except it’s the other way around : solid color on normal mode and gradient on hover mode) : https://cf-library.webflow.io/
hi @Thom_Lefevre the best way to get help is to follow the forum post guide that is pinned on top of each section, if you have missed it here they are.
When posting please:
Required: Share your project’s Read-Only link AND live site’s Published link
The read-only link is a special URL generated in the Dashboard to allow others to view your project in the Webflow Designer. How to get your project’s read-only link?
The published link is the webflow.io subdomain where you can view the live site with custom code running. It is IMPORTANT to share this link, as custom code does not run in the Designer.
Upload as many screenshots/screencast videos as possible to help others help you faster
Add a description and/or post a link to a working example of what you’re trying to achieve
Reply to users by tagging using the @ sign followed by their forum username like this: @Thom_Lefevre
Hi @Thom_Lefevre the artefact is caused with your border as you have set border on button and also on blue-gradient You can have only one boxer on combo button.blue-gradient.
You have already set your hover mode but opposite way. Just fix its behaviour.
hi @Thom_Lefevre I do not know reason why you are adding transparent border but if it is your intention the solution to your issue is to set your background-origin to border-box as its base setting is padding-box I do not know if WF offer this in their UI but if not you can use custom code. I have created example on Codepen.
Hi Stan, thanks for your answer ! I added it because if there is no transparent 2px border when the button is in normal mode, when you hover on it, it “jumps” with the added padding. See here how it jumps without the transparent border, and doesn’t when i add it (but then it has the weird artifact) :
When i searched on the forum how to solve this jumping issue, the solution given was the transparent border… But it created a new problem… Note : if the button doesn’t have a gradient, the artifact doesn’t appear.
Hi, i just found some sort of solution in the Webflow UI, without the need for custom code : I clipped the background gradient fill to the padding. Now it doesn’t jump anymore, it just “grows” into the border when you hover on it.
It solves my problem, so I will resolve this thread, although itsn’t exactly what I want. I’m sure there are 3-4 other solutions but I don’t know them hahaha
Thank you so much @Stan for your time and help !!!
![[video-to-gif output image]](https://im3.ezgif.com/tmp/ezgif-3-b09bbb3c6d.gif)