什麼導致我的按鈕（「查看所有內容」）中的文本在放大時顯示爲3D

Question

您可以在常規視圖和懸停時在按鈕上的文本下方看到灰色陰影背景。我不確定是否因爲我使用的引導主題（相對較新+自我教學）。任何幫助表示讚賞！謝謝。

CODEPEN：https://codepen.io/minacosentino/pen/JyBQxM

.btn-primary { 
    font-family: "Montserrat", arial, sans-serif; 
    font-weight: 400; 
    text-transform: uppercase; 
    letter-spacing: .25rem; 
    text-indent: .75rem; 
    margin-bottom: 5rem; 
    background: #4fd2c2; 
    border-color: #4fd2c2; 
    color: #fff; 
    border: none; 
    border-radius: 3rem; 
    height: 30px; 
    padding: 2rem 4rem; 
    font-size: 1.25rem; 
    line-height: 0rem; 
    } 

    .btn-primary:hover { 
    background: #ffffff; 
    color: #4fd2c2; 
    border: 2px solid #4fd2c2; 
    } 

Answer 1

試試這個上.btn小學

text-shadow:none; 

https://codepen.io/anon/pen/PKVByp

Answer 2

的.btn-primary有box-shadow財產:hover CSS引起的D3一樣的效果，當鼠標懸停該按鈕：

.btn-primary:hover { 
    background: #4fd2c2; 
    border-color: transparent; 
    box-shadow: 0rem 0.75rem 3rem #D8D8D8; 
    transition: .5s ease-in-out !important; 
} 

這裏這是一個片段：

.btn-primary { 
 
    background: #4fd2c2; 
 
    border-radius: 25px; 
 
    display: inline-block; 
 
    padding: 10px; 
 
} 
 
.btn-primary:hover { 
 
    border-color: transparent; 
 
    box-shadow: 0rem 0.75rem 3rem #D8D8D8; 
 
    transition: .5s ease-in-out !important; 
 
}

<div class="btn-primary">This is a test</div>