So fügen Sie einer Schaltfläche einen transparenten Hover-Status hinzu

Question

Ich habe Schwierigkeiten, meiner Schaltfläche einen transparenten Hintergrund hinzuzufügen.

Ich weiß, es ist ziemlich einfach, aber ich bin mir nicht sicher, was ich falsch mache, damit es nicht wirksam wird.

Der HTML-Code Ich habe geschrieben:

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

Mein CSS-Code:

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; 
} 

Ich habe ein Bild hinzugefügt, was ich versuche auf die Schaltfläche, um wie unten zu bekommen .

Answer 1

Hier gehen Sie mit einem schönen Übergang 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

Der einzige Trick auf eine Schaltfläche wie dieser ist, dass es eine border ist. Ich gehe davon aus, dass unter :hover der Hintergrund angezeigt werden soll, da dies die gebräuchlichste Verwendung für diese Ghost- oder Outline-Schaltflächenstile zu sein scheint.

Wenn das der Fall, dass Ihr Code wie folgt aussehen könnte:

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