使用CSS在内部按钮

Question

如何制作带内边框的按钮，如果我将鼠标悬停在按钮上，内边框会缩小？

.btnTest {
    color: #f5f5f5;
    background-color: #000000;
    -webkit-border-radius: 1;
    -moz-border-radius: 1;
    border-radius: 1px;
    /*border: 0;*/
    border-bottom: 3px solid green;
    /*-webkit-border-radius: 0;
    -moz-border-radius: 2;
    border-radius: 2px;*/
}

.btnTest:hover {
    color: #f5f5f5;
    background-color: #000000;

    -webkit-border-radius: 1;
    -moz-border-radius: 1;
    border-radius: 1px;

    border-bottom: 2px solid green;
    margin-bottom: 1px;
    /*border-bottom: 3px solid transparent;*/
}

Answer 1

您是否尝试过使用box-shadow？

＆＃13;

＆＃13;

.btnTest {
      height: 40px;
      text-align: center;
      color: #f5f5f5;
      background-color: #000000;
      -webkit-border-radius: 1;
      -moz-border-radius: 1;
      border-radius: 1px;
      box-shadow: inset 0 -6px green;
}

.btnTest:hover {
      box-shadow: inset 0 -4px green;
}

＆＃13;

<div class="btnTest">button</div>

＆＃13;

＆＃13;

＆＃13;