How can I change the button border color dynamically?-CodePudding

I'm making an outlined button component and getting the button colors dynamically in hex type by the backend. Whatever color comes, the hover color should be one tone darker than the normal color. I used filter: brightness(85%) for button text color but I can't use it for border color. How can I dynamically make the hover color of the border color one shade darker? By the way, I saw that there are recommendations for using HSL in similar questions, unfortunately it is not possible for me to use HSL at this stage.

I'm sharing the snippet below to make it a little more descriptive. In my case, instead of predetermined colors, there are colors that come from the backend as hex code and are kept as css variable.

.outlined-button {
  color: #FF0000;
  border: 5px solid #FF0000;
  width: 400px;
  height: 100px;
  font-size: 20px;
  background-color: transparent;
  transition: all 0.15s linear;
  cursor: pointer;
}

.outlined-button:hover {
  color: #aa2c2c;
  border: 5px solid #aa2c2c;
}

<button >hi</button>

CodePudding user response：

Instead of a border you can use an inset box-shadow

example:

button {
  border:0;
  outline: 0;
  padding: 7px 10px;
  color:white;
  background: #32aae1;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.2)
}

button:hover {
  filter: brightness(85%)
}

<button>My button!</button>

CodePudding user response：

Okey, searching here i found this answer that covers your issue. I attach a modified snippet that fulfills your requirements. Hope it helps!

CSS append explanation: We need to append the CSS this way cause as it modifies a pseudoelement (:hover) we cannot access this from Js.

Note: JS code is commented to help comprehension.

const colorFromAPI = '#0bbeb7'

// The other answer code
const pSBC = (p, c0, c1, l) => {
  let r, g, b, P, f, t, h, i = parseInt,
    m = Math.round,
    a = typeof(c1) == "string";
  if (typeof(p) != "number" || p < -1 || p > 1 || typeof(c0) != "string" || (c0[0] != 'r' && c0[0] != '#') || (c1 && !a)) return null;
  if (!this.pSBCr) this.pSBCr = (d) => {
    let n = d.length,
      x = {};
    if (n > 9) {
      [r, g, b, a] = d = d.split(","), n = d.length;
      if (n < 3 || n > 4) return null;
      x.r = i(r[3] == "a" ? r.slice(5) : r.slice(4)), x.g = i(g), x.b = i(b), x.a = a ? parseFloat(a) : -1
    } else {
      if (n == 8 || n == 6 || n < 4) return null;
      if (n < 6) d = "#"   d[1]   d[1]   d[2]   d[2]   d[3]   d[3]   (n > 4 ? d[4]   d[4] : "");
      d = i(d.slice(1), 16);
      if (n == 9 || n == 5) x.r = d >> 24 & 255, x.g = d >> 16 & 255, x.b = d >> 8 & 255, x.a = m((d & 255) / 0.255) / 1000;
      else x.r = d >> 16, x.g = d >> 8 & 255, x.b = d & 255, x.a = -1
    }
    return x
  };
  h = c0.length > 9, h = a ? c1.length > 9 ? true : c1 == "c" ? !h : false : h, f = this.pSBCr(c0), P = p < 0, t = c1 && c1 != "c" ? this.pSBCr(c1) : P ? {
    r: 0,
    g: 0,
    b: 0,
    a: -1
  } : {
    r: 255,
    g: 255,
    b: 255,
    a: -1
  }, p = P ? p * -1 : p, P = 1 - p;
  if (!f || !t) return null;
  if (l) r = m(P * f.r   p * t.r), g = m(P * f.g   p * t.g), b = m(P * f.b   p * t.b);
  else r = m((P * f.r ** 2   p * t.r ** 2) ** 0.5), g = m((P * f.g ** 2   p * t.g ** 2) ** 0.5), b = m((P * f.b ** 2   p * t.b ** 2) ** 0.5);
  a = f.a, t = t.a, f = a >= 0 || t >= 0, a = f ? a < 0 ? t : t < 0 ? a : a * P   t * p : 0;
  if (h) return "rgb"   (f ? "a(" : "(")   r   ","   g   ","   b   (f ? ","   m(a * 1000) / 1000 : "")   ")";
  else return "#"   (4294967296   r * 16777216   g * 65536   b * 256   (f ? m(a * 255) : 0)).toString(16).slice(1, f ? undefined : -2)
}

// Calculate new color with above function, negative first argument is for darken
const newColor = pSBC(-.50, colorFromAPI);

// We create new CSS to append
const newCSS = `
  .outlined-button {
    color: ${colorFromAPI};
    border-color: ${colorFromAPI};
  }
  .outlined-button:hover {
    color: ${newColor};
    border-color: ${newColor};
  }`
  
const style = document.createElement('style');

if (style.styleSheet) {
    style.styleSheet.cssText = newCSS;
} else {
    style.appendChild(document.createTextNode(newCSS));
}

document.getElementsByTagName('head')[0].appendChild(style);

.outlined-button {
  color: #FF0000;
  border: 5px solid #FF0000;
  width: 400px;
  height: 100px;
  font-size: 20px;
  background-color: transparent;
  transition: all 0.15s linear;
  cursor: pointer;
}

.outlined-button:hover {
  color: #aa2c2c;
  border: 5px solid #aa2c2c;
}

<button >hi</button>