CODEWITHSUNDEEP
htmlcss
Elliott Davidson
Elliott Davidson

Reputation: 209

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

Upvotes: 3

Views: 10442

Answers (2)

Robert
Robert

Reputation: 6967

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>

Upvotes: 0

Rudi Urbanek
Rudi Urbanek

Reputation: 1943

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>

Upvotes: 3

Related Questions