Why does my button have a box shadow around it?-CodePudding

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>

CodePudding user response：

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);
}

<button>Button</button>

CodePudding user response：

Removing >border-color< would do it

button {
  background-color: var(--accent);
  border-radius: 10px;
  box-shadow: 0;      
  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>

CodePudding user response：

try setting the box-shadow to none