How to add a transparent hover state to a button - html

Question

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">I want to know!</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.

Answer 1

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">I want to know!</button></p>
</div>

Answer 2

The only trick to a button like this is that there is a border. I'm going to assume that on :hover you want the background to appear, as this seems to be the most common usage for these ghost or outline button styles.
That being the case your code might look something like this:
.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>