'Remove ugly white shadow from button when hovered

Whenever I hover over my button that I created, it has a white which looks ugly in the transition. I need help to remove this.

The button has two different blocks of css: one for the button itself and other block is .morb_button for the same button on a different webpage.

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


Solution 1:[1]

You have used the property box-shadow twice in the snippet. Remove either of them to fix this.

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

Solution 2:[2]

Remove this rule, because it's the one that gives the white shadow to the button.

box-shadow: 2px 2px 3px #4a0404;

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Amit
Solution 2 Skatox

Related Questions