Shopping Cart Button

By Christine Siu

F6
#
button ecommerce shopping cart checkout
How do I use This?

A shopping cart button with a dropdown to display the items in your cart.

HTML
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

<button type="button" class="shopping-cart-button float-right" data-toggle="shopping-cart-dropdown">
  <i class="fa fa-shopping-cart"></i>
  <span class="text">Shopping Cart (3)</span>
</button>
<div class="shopping-cart-dropdown-pane">
  <div class="dropdown-pane bottom " id="shopping-cart-dropdown" data-dropdown data-hover="true" data-hover-pane="true">
    <div class="shopping-cart-item">
      <img src="https://placeimg.com/60/80/any">
      <div class="shopping-cart-item-name">
        <a>Style & Co Knit Blazer</a>
        <p><span class="shopping-cart-title">Color: </span>Blue</p>
        <p><span class="shopping-cart-title">Size: </span>M</p>
      </div>
      <div class="shopping-cart-item-price">
        <p class="shopping-cart-title">$24.99</p>
        <a href="#">Remove</a>
      </div>
    </div>

    <div class="shopping-cart-item">
      <img src="https://placeimg.com/60/80/any">
      <div class="shopping-cart-item-name">
        <a>Style & Co Knit Blazer</a>
        <p><span class="shopping-cart-title">Color: </span>Blue</p>
        <p><span class="shopping-cart-title">Size: </span>M</p>
      </div>
      <div class="shopping-cart-item-price">
        <p class="shopping-cart-title">$24.99</p>
        <a href="#">Remove</a>
      </div>
    </div>

    <div class="shopping-cart-item">
      <img src="https://placeimg.com/60/80/any">
      <div class="shopping-cart-item-name">
        <a>Style & Co Knit Blazer</a>
        <p><span class="shopping-cart-title">Color: </span>Blue</p>
        <p><span class="shopping-cart-title">Size: </span>M</p>
      </div>
      <div class="shopping-cart-item-price">
        <p class="shopping-cart-title">$24.99</p>
        <a href="#">Remove</a>
      </div>
    </div>

    <a href="#" class="button shopping-cart-checkout expanded">Checkout</a>

  </div>
</div>


.shopping-cart-button {
  padding: 1rem;
  background-color: $primary-color;

  &:hover {
    background-color: darken($primary-color, 10%)
  }

  i {
    margin-right: 0.5rem;
  }
}

.shopping-cart-dropdown-pane {
  .dropdown-pane {
    padding: 0;
  }
}

.shopping-cart-item {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid $light-gray;
}

.shopping-cart-item-name, .shopping-cart-item-price {
  padding: 0 1rem;

  p {
    margin: 0;
    padding: 0;
  }
}

.shopping-cart-title {
  font-weight: bold;
}

.shopping-cart-checkout {
  padding: 0.5rem;
  margin-bottom: 0;
}



.shopping-cart-button {
  padding: 1rem;
  background-color: #1779ba;
}

.shopping-cart-button:hover {
  background-color: #115b8d;
}

.shopping-cart-button i {
  margin-right: 0.5rem;
}

.shopping-cart-dropdown-pane .dropdown-pane {
  padding: 0;
}

.shopping-cart-item {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid #e6e6e6;
}

.shopping-cart-item-name, .shopping-cart-item-price {
  padding: 0 1rem;
}

.shopping-cart-item-name p, .shopping-cart-item-price p {
  margin: 0;
  padding: 0;
}

.shopping-cart-title {
  font-weight: bold;
}

.shopping-cart-checkout {
  padding: 0.5rem;
  margin-bottom: 0;
}
JS

Similar Building Blocks

control

Toggle All Switch

F6
by Rafi
control

Like Button

F6
by Christine Siu
control

Social buttons

F6
by Harry Manchanda