CSS：按钮文字在点击时移动

Question

 .btn_style{
   border: none;
   outline: 0;
   background: #edf1f2;
   border-radius: 2px;
   width: 90px;
   height: 30px;
}
.btn_style:focus{
   border: thin #c7d3d6 solid;
   width: 90px;
   height: 30px;
   outline: 0 !important;
}

<button type="button" class="btn_style">Medium</button>

当我单击按钮时，文本会稍微移动。

任何帮助都会很棒。

谢谢。

Answer 1

.btn_style{
            border: none;
            outline: 0;
            background: #edf1f2;
            border-radius: 2px;
            width: 90px;
            height: 30px;
            padding:0;
            margin:0;
             
          }

          .btn_style:focus{
            border: thin #c7d3d6 solid;
            width: 90px;
            height: 30px;
            outline: 0 !important;
          }

<button type="button" class="btn_style">Medium</button>

将padding:0和添加margin:0到.btn_style。这将解决您的问题。

希望这可以帮助。