Button Hover Options

By Rafi

F6
#
button ecommerce show hide interaction flexbox
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;
}
JS

Similar Building Blocks

control

Hover Add to Cart Button

F6
by Rafi
control

Hover Like Button

F6
by Rafi
control

Add to Cart Interaction

F6
by Rafi