Button Hover Options

By Rafi

How do I use This?

Gives the user two options on hover.

HTML

<div class="button-hover-reveal-wrapper">
  <label>Sign Up Now</label>
  <a href="#" class="button-hover-reveal">Plan 1</a>
  <a href="#" class="button-hover-reveal">Plan 2</a>
</div>

.button-hover-reveal-wrapper {
  overflow: hidden;
  border: 2px solid $primary-color;
  border-radius: 5000px;
  text-align: center;
  width: 100%;
  background: $white;
  display: flex;
  justify-content: center;

  &:hover {
    border: none;
    background-color: $primary-color;
    transition: background-color 0.5s ease;

    .button-hover-reveal {
      display: block;
      font-size: 16px;
      padding: 22px;

      &:hover {
        transition: background-color 0.5s ease;
        background-color: rgba(0, 0, 0, 0.1);
      }
    }

    label {
      display: none;
    }
  }

  .button-hover-reveal {
    display: none;
    color: $white;
    width: 50%;
    z-index: 1;
  }

  label {
    padding: 16px;
    color: $primary-color;
    font-size: 16px;
    font-weight: bold;
  }
}

.button-hover-reveal-wrapper {
  overflow: hidden;
  border: 2px solid #1779ba;
  border-radius: 5000px;
  text-align: center;
  width: 100%;
  background: #fefefe;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.button-hover-reveal-wrapper:hover {
  border: none;
  background-color: #1779ba;
  transition: background-color 0.5s ease;
}

.button-hover-reveal-wrapper:hover .button-hover-reveal {
  display: block;
  font-size: 16px;
  padding: 22px;
}

.button-hover-reveal-wrapper:hover .button-hover-reveal:hover {
  transition: background-color 0.5s ease;
  background-color: rgba(0, 0, 0, 0.1);
}

.button-hover-reveal-wrapper:hover label {
  display: none;
}

.button-hover-reveal-wrapper .button-hover-reveal {
  display: none;
  color: #fefefe;
  width: 50%;
  z-index: 1;
}

.button-hover-reveal-wrapper label {
  padding: 16px;
  color: #1779ba;
  font-size: 16px;
  font-weight: bold;
}

Button Hover Options

By Rafi

Hover Add to Cart Button

Hover Like Button

Add to Cart Interaction

Button Hover Options

By Rafi

Similar Building Blocks

Hover Add to Cart Button

Hover Like Button

Add to Cart Interaction