CODEWITHSUNDEEP
htmlcss
Potter Edgerton
Potter Edgerton

Reputation: 103

Why does my button have a box shadow around it?

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>

Upvotes: 0

Views: 140

Answers (3)

Jonath B E
Jonath B E

Reputation: 1

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>

Upvotes: 0

Leland
Leland

Reputation: 2119

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>

Upvotes: 3

Rinalds Kudelko
Rinalds Kudelko

Reputation: 37

try setting the box-shadow to none

Upvotes: -2

Related Questions