Hover Add to Cart Button

By Rafi

F6
#
button ecommerce hover interaction
How do I use This?

Hover over the button to reveal a cart.

HTML
<button class="button-hover-addcart button"><span>Add to cart</span><i class="fa fa-shopping-cart"></i></button>


.button-hover-addcart {
  border: 2px solid $secondary-color;
  background: transparent;
  color: $secondary-color;
  text-transform: uppercase;
  overflow: hidden;
  letter-spacing: 0.07rem;
  transition: all 0.2s ease-in-out;
  position: relative;

  span {
    transition: all 0.2s ease-in-out;
  }

  .fa {
    position: absolute;
    font-size: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    color: $primary-color;
    right: -20px;
    transition: 0.4s right cubic-bezier(0.38,0.6,0.48,1);
  }

  &:hover {
    border-color: $primary-color;
    background: transparent;
    transition: border-color 0.2s;

    span {
      margin-right: 20px;
      color: $primary-color;
    }

    .fa {
      right: 12px;
    }
  }
}



.button-hover-addcart {
  border: 2px solid #767676;
  background: transparent;
  color: #767676;
  text-transform: uppercase;
  overflow: hidden;
  letter-spacing: 0.07rem;
  transition: all 0.2s ease-in-out;
  position: relative;
}

.button-hover-addcart span {
  transition: all 0.2s ease-in-out;
}

.button-hover-addcart .fa {
  position: absolute;
  font-size: 1.2rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  color: #1779ba;
  right: -20px;
  transition: 0.4s right cubic-bezier(0.38, 0.6, 0.48, 1);
}

.button-hover-addcart:hover {
  border-color: #1779ba;
  background: transparent;
  transition: border-color 0.2s;
}

.button-hover-addcart:hover span {
  margin-right: 20px;
  color: #1779ba;
}

.button-hover-addcart:hover .fa {
  right: 12px;
}
JS

Similar Building Blocks

control

Social buttons

F6
by Harry Manchanda
control

Button Hover Options

F6
by Rafi
control

Social Icon Buttons

F6
by Rafi