透明なホバー状態をボタンに追加する方法

Question

透明な背景をボタンに追加しようとしています。

私はそれが非常に簡単だと知っていますが、私はそれが有効でないために間違って何をしているのか分かりません。

私が書いたHTMLコード：

<div class="footer-text-cta"> 
    <p>Want to know what equipment I use when I go kayaking?<button class="green-button"><a href="#" class="manual-optin-trigger" data-optin-slug="atefh5rvxazforll">I want to know!</a></button></p> 
</div> 

を私のCSSコード：

button.green-button{ 
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    padding: 7px 20px !important; 
    border-radius: 5px; 
    margin: 0px 0px 0px 20px; 
    background-color: #1ec279; 
    border: 3px solid #1ec279; 
    border-radius: 5px; 
} 

button.green-button a { 
    text-decoration: none; 
    color: #fff; 
} 

button.green-button a:hover{ 
    background-color: transparent; 
    color: #1ec279; 
} 

私は以下のように見えるためにボタンを取得しようとしているものの画像を追加しました。ここで

Answer 1

あなたは、このようなボタンにのみトリックborderがあることがある素敵な遷移XD

button.green-button{ 
 
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
 
    padding: 7px 20px !important; 
 
    border-radius: 5px; 
 
    margin: 0px 0px 0px 20px; 
 
    background-color: #1ec279; 
 
    border: 3px solid #1ec279; 
 
    border-radius: 5px; 
 
    transition: 0.8s; 
 
} 
 

 
button.green-button a { 
 
    text-decoration: none; 
 
    color: #fff; 
 
} 
 

 
button.green-button:hover{ 
 
    background-color: rgba(255,255,255,0); 
 
    cursor: pointer; 
 
    
 
} 
 
button.green-button:hover a{ 
 
color: #1ec279; 
 
}

<div class="footer-text-cta"> 
 
    <p>Want to know what equipment I use when I go kayaking?<button class="green-button"><a href="#" class="manual-optin-trigger" data-optin-slug="atefh5rvxazforll">I want to know!</a></button></p> 
 
</div>

Answer 2

で行きます。私は、:hoverに、背景が表示されることを前提としています。これは、これらのゴーストまたは輪郭ボタンスタイルの最も一般的な使用法のようです。

ケースであることはあなたのコードは次のようなものになりますこと：

.button-example { 
 
    padding: 15px; 
 
    background: #000; 
 
} 
 

 
.button { 
 
    display: inline-block; 
 
    padding: 10px 15px; 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    border: 3px solid #aaa; 
 
    border-radius: 6px; 
 
    cursor: pointer; 
 
} 
 

 
.button-green { 
 
    background: #1ec279; 
 
    border-color: #1ec279; 
 
    color: #fff; 
 
} 
 

 
.button-green.button-outline { 
 
    background: none; 
 
} 
 

 
.button-green:hover { 
 
    background: #19a969; 
 
    border-color: #19a969; 
 
}

<div class="button-example"> 
 
    <button class="button button-green"> 
 
    I am a green button 
 
    </button> 
 

 
    <button class="button button-green button-outline"> 
 
    I am a green outline button 
 
    </button> 
 

 
    <button class="button"> 
 
    I am a sad, colorless button 
 
    </button> 
 
</div>