ボタンの周りの白い輪郭を取り除くにはどうすればよいですか？

Question

このボタンから白いアウトラインを取得するにはどうすればよいですか？

ここにCSSがあります。何か原因があると思ったら教えてください。

.btn { 
    background: linear-gradient(45deg, rgba(51, 197, 230, 0.5) 0%,rgba(51, 230, 131, 0.5) 50%,rgba(108,0,153,0.65) 100%); 
    border-radius: 10px; 
    width: 1315px; 
    color: #fff; 
    font-size: 18px; 
    letter-spacing: 1px; 
    padding: 16px 32px; 
    text-decoration: none; 
    text-transform: uppercase; 
    -webkit-transition: box-shadow 1s ease; 
    transition: box-shadow 1s ease; 
} 

@-webkit-keyframes hvr-bob { 
    0% { 
    -webkit-transform: translateY(-8px); 
    transform: translateY(-8px); 
    } 

    50% { 
    -webkit-transform: translateY(-4px); 
    transform: translateY(-4px); 
    } 

    100% { 
    -webkit-transform: translateY(-8px); 
    transform: translateY(-8px); 
    } 
} 

@keyframes hvr-bob { 
    0% { 
    -webkit-transform: translateY(-8px); 
    transform: translateY(-8px); 
    } 

    50% { 
    -webkit-transform: translateY(-4px); 
    transform: translateY(-4px); 
    } 

    100% { 
    -webkit-transform: translateY(-8px); 
    transform: translateY(-8px); 
    } 
} 

@-webkit-keyframes hvr-bob-float { 
    100% { 
    -webkit-transform: translateY(-8px); 
    transform: translateY(-8px); 
    } 
} 

@keyframes hvr-bob-float { 
    100% { 
    -webkit-transform: translateY(-8px); 
    transform: translateY(-8px); 
    } 
} 

.btn { 
    display: inline-block; 
    vertical-align: middle; 
    -webkit-transform: translateZ(0); 
    transform: translateZ(0); 
    box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
    -moz-osx-font-smoothing: grayscale; 
} 
.btn:hover, a.btn:focus, a.btn:active { 
    -webkit-animation-name: hvr-bob-float, hvr-bob; 
    animation-name: hvr-bob-float, hvr-bob; 
    -webkit-animation-duration: .3s, 1.5s; 
    animation-duration: .3s, 1.5s; 
    -webkit-animation-delay: 0s, .3s; 
    animation-delay: 0s, .3s; 
    -webkit-animation-timing-function: ease-out, ease-in-out; 
    animation-timing-function: ease-out, ease-in-out; 
    -webkit-animation-iteration-count: 1, infinite; 
    animation-iteration-count: 1, infinite; 
    -webkit-animation-fill-mode: forwards; 
    animation-fill-mode: forwards; 
    -webkit-animation-direction: normal, alternate; 
    animation-direction: normal, alternate; 
} 

Answer 1

上記のコメンターは良い開始となりborder: noneとoutline: noneをcorrect--ています。ブラウザ自体には既定のスタイルがいくつかあることを覚えておいてください。スタイルを設定する前にオーバーライドする場合は、CSS Resetを調べることをおすすめします。また、あなたの.btnの分類された要素はdivですか、またはbuttonですか？後者の場合、ネイティブフォーム要素はブラウザ間で適切にスタイルを設定するのが難しいので、視覚的な処理が重要な場合は、divとイベントハンドラの使用を検討する必要があります。