Кнопка внутри границы с помощью 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?

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

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