Why do default buttons change color when borders are removed?

Question

As you can see from running the snippet below, the background color becomes darker when borders are removed. I guess it has something to do with background-color: butt

Answer 1

It depends on how the browser handles buttons related

---

The following was limited to the Chrome Browser:

When you try to use all:initial to applies the initial (or default) value of a property to an element. You would at the very minimum need the following style to have the default button:

-webkit-appearance: button;
border-width: 2px;
border-style: outset;
border-color: buttonface;
background-color: buttonface;

Breaking down the button style:

.noBorder {
  border: none;
}

.all-init {
  all: initial;
}

.leftover {
  color: buttontext;
  border-image: initial;
  font: 400 13.3333px Arial;
  padding: 1px 6px;
}

.p1 {
  /*property #1 required*/
  -webkit-appearance: button;
}

.p2 {
  /*property #2 required*/
  border-width: 2px;
}

.p3 {
  /*property #3 required*/
  border-style: outset;
}

.p4 {
  /*property #4 required*/
  border-color: buttonface;
}

.p5 {
  /* property #5 required*/
  background-color: buttonface;
}

.whole {
  -webkit-appearance: button;
  color: buttontext;
  background-color: buttonface;
  font: 400 13.3333px Arial;
  padding: 1px 6px;
  border-width: 2px;
  border-style: outset;
  border-color: buttonface;
  border-image: initial;
}

No border 

test0
test1
test2
test3
test4
test5a
test5b
test5c
test5d
test6

test7

test8a
test8b
test8c
test8d
test8e
test8f
test9

With border

Additional info: button was using ButtonFace which is CSS2 color name corresponding to HEX value: #F0F0F0 or RGB value: 240,240,240 to display it see more in http://www.iangraham.org/books/xhtml1/appd/update-23feb2000.html.

---

Disclaimer: As Temani Afif said in this answer

every browser have default style applied by the browser (related to border and background) and if you try to alter any value you will break everything.

You could probably see test0 and test1 working in Edge and none working in Firefox since it was how the browser handles buttons related. You can see Andrei Gheorghiu answer for more detail for button complete style and debugging method.

---

As such, the most common workaround that I've seen and implemented is not to use but other elements such as or to support cross-browser.

Example:

.styling {
  background-color: #1cbcd8;
  color: #fff;
  border-color: #1cbcd8;
}

.styling:hover {
  background-color: #255FF9;
}

.extra {
  display: inline-block;
  cursor: default; /* or pointer */
  padding: 3px;
  text-decoration: none;
}

Test