Elliott Davidson Elliott Davidson - 3 months ago 10
CSS Question

How to add a transparent hover state to a button

I'm struggling to add a transparent background to my button.

I know it's quite simple but I'm not sure what I'm doing wrong for it not to take effect.

The Html code I've written:

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


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


I've added an image of what I'm trying to get the button to look like below.
enter image description here

Answer

Here you go with a nice transition 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>

Comments