Weird artefacts on transparent borders of buttons in normal state

Hi, if you read this I hope you’re doign well!

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 :slight_smile:

More screenshots of the problem :

Button border and color settings on normal mode :

Button border settings and color settings on hover mode :

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) :

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 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
1 Like

Hi @Stan, thank you for the information, it is true that I missed those, I will update my post accordingly. Have a nice day!

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

You have already set your hover mode but opposite way. Just fix its behaviour.

Hi Stan, i fixed this by having only one class on my button, but the problem perists…

You can see it here :


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.

1 Like

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.

[video-to-gif output image]

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 !!!