# Border colour change with background on state change

**URL:** <https://community.weweb.io/t/border-colour-change-with-background-on-state-change/19868>\
**Category:** How do I?\
**Tags:** design\
**Created:** [September 4, 2025, 6:54am UTC](https://community.weweb.io/t/border-colour-change-with-background-on-state-change/19868 "2025-09-04T06:54:51Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![xtremeexposures](https://avatars.discourse-cdn.com/v4/letter/x/5f9b8f/32.png) [@xtremeexposures](https://community.weweb.io/u/xtremeexposures)\
**Post date:** [September 4, 2025, 6:54am UTC](https://community.weweb.io/t/border-colour-change-with-background-on-state-change/19868/1 "2025-09-04T06:54:51Z")

</div>

I’m building out my design system and producing three different button styles.

In one of these, there’s a border around the button’s edge which changes colour between states.

When I change the state from default to hover etc, and the background colour needs to change too, the border colour is not changing to the right colour and is going to the highest contrast colour it can find.

 ![Screenshot 2025-09-04 at 07.49.28](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/2/28c6da84353d2665fe2292bcd96c2d6ef41f13df.png)

These are what I’m trying to recreate (from figma).

For instance, to build the tertiary button, I’ve got a transparent border on the top and bottom of the static tertiary button (to stop the text moving on hover) and then I change the bottom border colour to orange on hover along with the background colour.

Here’s my default State:

 ![Screenshot 2025-09-04 at 07.55.25](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/3/395c609f2dcca221e9775b6ed5764b6fbea6007a.png)

Hover State:

 ![Hover State](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/e/e3f20276476886bf816d8b0d519865a06dab7835.png)

What I’m seeing is this:

 ![Screenshot 2025-09-04 at 07.51.13](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/8/8d706493bb81823d21975f64a5ca7ae360068dba.png)

Any idea what I’ve done wrong?

---

<div class="post-metadata">

**Author:** ![Agustin\_Carozo](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/agustin_carozo/32/13231_2.png) [@Agustin\_Carozo](https://community.weweb.io/u/Agustin_Carozo)\
**Post date:** [September 4, 2025, 1:40pm UTC](https://community.weweb.io/t/border-colour-change-with-background-on-state-change/19868/2 "2025-09-04T13:40:38Z")

</div>

Hi there 👋

let’s try to figure this out.

- How are your button states defined? (custom classes, what is the conditional logic)
- Perhaps there is a global/project setting overriding the style of your buttons?
- You can try debugging this by publishing your project and using your browser developer tools (“Inspect”) to try and see which styles are being used/overriden