0

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>
Sfili_81
  • 2,377
  • 8
  • 27
  • 36
Potter Edgerton
  • 103
  • 6
  • what's the value of `--accent` ? is it a transparent color (opacity < 1)? – Fabrizio Calderan Dec 02 '22 at 15:47
  • @FabrizioCalderan the value of accent is #007bff. – Potter Edgerton Dec 02 '22 at 15:48
  • Your button moves because you set a translateY on hover – Sfili_81 Dec 02 '22 at 15:49
  • @Sfili_81 that is the intended purpose. – Potter Edgerton Dec 02 '22 at 15:49
  • Have a look at the user agent stylesheet. The default styling for buttons and other elements is styled by default there. https://stackoverflow.com/questions/12582624/what-is-a-user-agent-stylesheet – Adam Dec 02 '22 at 15:56
  • The reason for closing this question should be Typo, as the original question incorrectly refers to a shadow. Its also a mistake that cannot be reproduced, but since the mistake comes from a typo, I feel typo is the correct reason to close. – JΛYDΞV Dec 02 '22 at 16:12
  • Hm. A "typo" is a slip of the finger, an accidental typing mistake – like "Lrland". Taking a stab at where an issue stems from, and being wrong, is not a typo. – Leland Dec 02 '22 at 16:21

3 Answers3

3

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>
Leland
  • 2,019
  • 17
  • 28
0

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>
Jonath B E
  • 1
  • 2
-2

try setting the box-shadow to none

Rinalds Kudelko
  • 37
  • 2