单击按钮的顶部似乎有一个默认阴影，你可以在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%);

}