Whenever I hover over my button that I created, it briefly has a white shadow and I hate the way it looks in the transition. Does anyone know how to remove it?

I am a programming novice. But here is my code.

the button has two different pieces of css, the button function and .morb_button because they differed on two pages.

`. button {background-color: #961a75;

  border-radius: 5px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  display: inline-block;
  font-size: 25px;
  border:none;
  box-shadow: 1px 1px 3px #323d73;
  cursor:pointer;
  transition-duration: 0.2s;
  font-family: Gill Sans}
button:hover {
  background-color: #cc5caf; 
  color: white;
  box-shadow: 0px 0px 0px}
.morb_button {background-color:#022b27;box-shadow: 2px 2px 3px #4a0404}
.morb_button:hover {background-color: #03524a;}`

CodePudding user response：

you use box shadow 2 times,remove second

box-shadow: 0px 0px 0px} box-shadow: 2px 2px 3px #4a0404}

CodePudding user response：

box-shadow: 2px 2px 3px #4a0404 Remove this