Кнопка Активная фокусировка тени по умолчанию проблема

Question

Кажется, что верхняя часть кнопки имеет тень по умолчанию, при нажатии на которую вы можете видеть в примере Codepen, золотая рамка вокруг верхнего края становится темнее - как мне удалить это поведение?

Пример

.button {
   cursor:pointer;
   height: 3rem;
   width:10rem;
   margin:15px;
   font-size:2em;
   font-family: Helvetica, Arial, Sans-Serif;
   background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 9%,rgba(102,102,102,1) 20%,rgba(71,71,71,1) 34%,rgba(71,71,71,1) 34%,rgba(44,44,44,1) 45%,rgba(0,0,0,1) 54%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%);
   text-decoration:none;
   border-radius:10rem;
   border-color:#fcbd3f ;
   border-width: 1.5px;
   color:#d4d6d8 ;
   box-shadow: 0px 17px 10px -10px rgba(0,0,0,0.4);
   outline: none;

   &:active{
      outline: none;
      box-shadow: inset 0px 7px 10px -10px;
      background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(0,0,0,1) 16%,rgba(17,17,17,1) 51%,rgba(28,28,28,1) 70%,rgba(28,28,28,1) 70%,rgba(44,44,44,1) 82%,rgba(43,43,43,1) 82%,rgba(56,56,56,1) 82%,rgba(44,44,44,1) 82%,rgba(66,66,66,1) 84%,rgba(84,84,84,1) 91%,rgba(109,109,109,1) 92%,rgba(102,102,102,1) 98%,rgba(28,28,28,1) 100%,rgba(19,19,19,1) 100%);
   } 

   &:hover{
      color: white;
      outline: none;
   }
}

button:active{
   outline: none;
   box-shadow: inset 0px 7px 10px -10px;
   background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(0,0,0,1) 16%,rgba(17,17,17,1) 51%,rgba(28,28,28,1) 70%,rgba(28,28,28,1) 70%,rgba(44,44,44,1) 82%,rgba(43,43,43,1) 82%,rgba(56,56,56,1) 82%,rgba(44,44,44,1) 82%,rgba(66,66,66,1) 84%,rgba(84,84,84,1) 91%,rgba(109,109,109,1) 92%,rgba(102,102,102,1) 98%,rgba(28,28,28,1) 100%,rgba(19,19,19,1) 100%);
} 

Answer 1

Граница на кнопке является границей по умолчанию.Вы только изменили ширину и цвет, а не стиль.

Поэтому обычно определяют кнопки следующим образом: border: 1.5px solid #fcbd3f;

Где сплошной стиль границы.

Answer 2

Этот код исправляет вашу проблему:

.button:active {
    border-left-style: solid;
    border-top-style: solid;
}

РЕДАКТИРОВАТЬ: или проверьте работоспособность codepen