Why does my button have a box shadow around it?

December 2, 2022

Why does my button have a shadow around it?

I am trying to create a blue button with the border being the same color as the button itself. When you hover over the button it moves up by 3px and when you click it moves back down.

button {
  background-color: var(--accent);
  border-radius: 10px;
  box-shadow: 0;
  border-color: var(--accent);
  color: var(--background);
  padding-top: 7px;
  padding-bottom: 7px;
  padding-left: 15px;
  padding-right: 15px;
  cursor: pointer;
  transition: transform 0.3s;
}

button:hover {
  transform: translateY(-3px);
}

button:active {
  transform: translateY(-0px);
}

<button>Button</button>

>Solution :

I see no box shadow in Safari, Firefox, or Chrome. But perhaps you’re referring to the two-tone border color? That’s happening because default browser styles use border-style: outset. Try instead doing border-style: solid:

button {
  border-style: solid;
  border-radius: 10px;
  padding-top: 7px;
  padding-bottom: 7px;
  padding-left: 15px;
  padding-right: 15px;
  cursor: pointer;
  transition: transform 0.3s;
}

button:hover {
  transform: translateY(-3px);
}
button:active {
  transform: translateY(-0px);
}