html - 如何为按钮添加透明悬停状态

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

给你一个漂亮的过渡 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>