ズームしたときにボタンが表示される原因（「すべてのコンテンツを表示」）

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あなたがそのボタンを置くと、D3のような効果を引き起こすbox-shadowプロパティを持つ:hover CSSを持っています。ここ

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