ボタンにこの概要が表示されるのはなぜですか？ css

Question

Button outline picture ボックスシャドウをbtnに追加したときに表示されましたが、削除すると消えません。

.btn { 
 
    width: 70px; 
 
    height: 70px; 
 
    color: #EEEEEE; 
 
    margin-top: 4px; 
 
    background-color: #6c608c; 
 
    -webkit-background-clip: padding-box; 
 
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); 
 
    -o-transition: background-color .2s ease-in; 
 
    -moz-transition: background-color .2s ease-in; 
 
    -webkit-transition: background-color .2s ease-in; 
 
    transition: background-color .2s ease-in; 
 
}

<div class="col span_1_of_3"> 
 
    <img src="images/icon.png"></img> 
 
    <h1>SPACECRAFT</h1> 
 
    <button href="/index.html" class="btn">home</button> 
 
    <button href="members/index.html" class="btn">members</button></br> 
 
    <button href="studios/index.html" class="btn">studios</button> 
 
    <button href="contact/index.html" class="btn">contact</button> 
 
</div>

Answer 1

ボタンオブジェクトは、それが集中していることを示すためにoutline値を使用します。これはキーボードのユーザーにとっては実際には非常に重要です。しかし、あなたはそれを取り除くしたい場合は、あなたがこのような何かを実行する必要があります。

.btn:focus { 
    outline: none; 
} 

Answer 2

あなたは、次のようなあなたの.btn classに1つのより多くのスタイルを追加する必要があります。

しようとしました

.btn { 

     outline:none; 

} 

---