How To Create Animation Add To Cart Button

Hello friends meet again with us. On this occasion we will share a tutorial again, this is quite easy and I'm sure your friends will understand too.

This tutorial is aimed at friends who are of course still lacking knowledge or beginners. Most important, here our intention is to help each other and learn together. In accordance with the title of the article today,

"Add To Cart Animation Button"

If you are interested, please refer to the explanation and how to make it below:

First we make the Css first, see the following example.

.add-to-cart {
  --color: #fff;
  --icon: var(--color);
  --cart: #fff;
  --dots: #fff;
  --background: #275EFE;
  --shadow: rgba(0, 9, 61, 0.16);
  cursor: pointer;
  position: relative;
  outline: none;
  border: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  font-size: 16px;
  border-radius: 22px;
  padding: 12px 32px;
  font-weight: 500;
  line-height: 20px;
  -webkit-transform: scale(var(--s, 0.97));
          transform: scale(var(--s, 0.97));
  box-shadow: 0 var(--s-y, 4px) var(--s-b, 12px) var(--shadow);
  color: var(--color);
  background: var(--background);
  transition: box-shadow .3s, -webkit-transform .3s;
  transition: transform .3s, box-shadow .3s;
  transition: transform .3s, box-shadow .3s, -webkit-transform .3s;
}
.add-to-cart .default {
  padding-left: 16px;
  position: relative;
  opacity: var(--o, 1);
  -webkit-transform: scale(var(--s, 1));
          transform: scale(var(--s, 1));
  transition: opacity .3s, -webkit-transform .3s;
  transition: transform .3s, opacity .3s;
  transition: transform .3s, opacity .3s, -webkit-transform .3s;
  transition-delay: var(--d, 0.3s);
}
.add-to-cart .default:before, .add-to-cart .default:after {
  content: '';
  width: 2px;
  height: 12px;
  left: 0;
  top: 4px;
  border-radius: 1px;
  background: var(--icon);
  position: absolute;
  -webkit-transform: rotate(var(--r, 0deg));
          transform: rotate(var(--r, 0deg));
  transition: -webkit-transform .25s;
  transition: transform .25s;
  transition: transform .25s, -webkit-transform .25s;
}
.add-to-cart .default:after {
  --r: 90deg;
}
.add-to-cart .success {
  opacity: var(--o, 0);
  -webkit-transform: translate(-50%, var(--y, 12px));
          transform: translate(-50%, var(--y, 12px));
  position: absolute;
  top: 12px;
  left: 50%;
  transition: opacity .3s, -webkit-transform .3s;
  transition: opacity .3s, transform .3s;
  transition: opacity .3s, transform .3s, -webkit-transform .3s;
  transition-delay: var(--d, 0s);
}
.add-to-cart .dots {
  width: 4px;
  height: 4px;
  top: 20px;
  left: 50%;
  margin-left: -7px;
  border-radius: 2px;
  position: absolute;
  -webkit-transform-origin: 10px 50%;
          transform-origin: 10px 50%;
  background: var(--dots);
  box-shadow: 5px 0 0 var(--dots), 10px 0 0 var(--dots);
  opacity: var(--o, 0);
  -webkit-transform: scale(var(--s, 0.4));
          transform: scale(var(--s, 0.4));
  transition: opacity .3s, -webkit-transform .3s;
  transition: opacity .3s, transform .3s;
  transition: opacity .3s, transform .3s, -webkit-transform .3s;
  transition-delay: var(--d, 0s);
}
.add-to-cart .cart {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  border-radius: inherit;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.add-to-cart .cart:before {
  content: '';
  position: absolute;
  width: 20px;
  height: 16px;
  background: var(--background);
  top: 17px;
  right: 100%;
  z-index: 1;
  margin-right: -20px;
  -webkit-transform: translateX(-18px) rotate(-16deg);
          transform: translateX(-18px) rotate(-16deg);
}
.add-to-cart .cart > div {
  top: 13px;
  right: 100%;
  -webkit-transform: translateX(-18px) rotate(-16deg);
          transform: translateX(-18px) rotate(-16deg);
  position: absolute;
  z-index: 2;
  -webkit-transform-origin: 1px 21px;
          transform-origin: 1px 21px;
}
.add-to-cart .cart > div:before, .add-to-cart .cart > div:after {
  content: '';
  position: absolute;
  top: var(--t, 4px);
  left: var(--l, 0);
  height: 2px;
  width: var(--w, 18px);
  background: var(--cart);
  border-radius: 1px;
}
.add-to-cart .cart > div:after {
  --w: 16px;
  --t: 14px;
  --l: 1px;
}
.add-to-cart .cart > div > div {
  width: 2px;
  height: var(--h, 15px);
  border-radius: 1px;
  -webkit-transform: rotate(var(--r, -8deg));
          transform: rotate(var(--r, -8deg));
  background: var(--cart);
  position: relative;
}
.add-to-cart .cart > div > div:before, .add-to-cart .cart > div > div:after {
  content: '';
  position: absolute;
  background: inherit;
}
.add-to-cart .cart > div > div:after {
  width: 4px;
  height: 4px;
  border-radius: 2px;
  bottom: var(--b, -6px);
  left: var(--l, 0);
}
.add-to-cart .cart > div > div:first-child:before {
  border-radius: inherit;
  top: 0;
  right: 0;
  height: 2px;
  width: 6px;
  -webkit-transform-origin: 5px 1px;
          transform-origin: 5px 1px;
  -webkit-transform: rotate(16deg);
          transform: rotate(16deg);
}
.add-to-cart .cart > div > div:last-child {
  --h: 12px;
  --r: 8deg;
  position: absolute;
  left: 16px;
  bottom: -1px;
}
.add-to-cart .cart > div > div:last-child:after {
  --l: -2px;
  --b: -5px;
}
.add-to-cart.added .default {
  --o: 0;
  --s: .8;
  --d: 0s;
}
.add-to-cart.added .default:before {
  --r: -180deg;
}
.add-to-cart.added .default:after {
  --r: -90deg;
}
.add-to-cart.added .dots {
  --o: 1;
  --s: 1;
  --d: .3s;
  -webkit-animation: dots 2s linear forwards;
          animation: dots 2s linear forwards;
}
.add-to-cart.added .success {
  --o: 1;
  --y: 0;
  --d: 1.8s;
}
.add-to-cart.added .cart:before, .add-to-cart.added .cart > div {
  -webkit-animation: cart 2s forwards;
          animation: cart 2s forwards;
}
.add-to-cart:not(.added):hover {
  --s: 1;
  --s-y: 8px;
  --s-b: 20px;
}
.add-to-cart:not(.added):active {
  --s: .94;
  --s-y: 2px;
  --s-b: 6px;
}

@-webkit-keyframes cart {
  41%,
    49%,
    57%,
    60% {
    -webkit-transform: translateX(72px) rotate(0deg);
            transform: translateX(72px) rotate(0deg);
  }
  40%,
    47%,
    54% {
    -webkit-transform: translateX(72px) rotate(0deg) translateY(1px);
            transform: translateX(72px) rotate(0deg) translateY(1px);
  }
  100% {
    -webkit-transform: translateX(180px) rotate(-16deg);
            transform: translateX(180px) rotate(-16deg);
  }
}

@keyframes cart {
  41%,
    49%,
    57%,
    60% {
    -webkit-transform: translateX(72px) rotate(0deg);
            transform: translateX(72px) rotate(0deg);
  }
  40%,
    47%,
    54% {
    -webkit-transform: translateX(72px) rotate(0deg) translateY(1px);
            transform: translateX(72px) rotate(0deg) translateY(1px);
  }
  100% {
    -webkit-transform: translateX(180px) rotate(-16deg);
            transform: translateX(180px) rotate(-16deg);
  }
}
@-webkit-keyframes dots {
  5% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  25% {
    -webkit-transform: translateY(-20px) rotate(-32deg);
            transform: translateY(-20px) rotate(-32deg);
    box-shadow: 5px 0 0 var(--dots), 10px 0 0 var(--dots);
  }
  31% {
    box-shadow: 5px -4px 0 var(--dots), 10px -8px 0 var(--dots);
  }
  32%,
    50% {
    -webkit-transform: translateY(0) rotate(0deg);
            transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  45%,
    100% {
    box-shadow: 5px 0 0 var(--dots), 10px 0 0 var(--dots);
  }
  51%,
    100% {
    opacity: 0;
  }
}
@keyframes dots {
  5% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  25% {
    -webkit-transform: translateY(-20px) rotate(-32deg);
            transform: translateY(-20px) rotate(-32deg);
    box-shadow: 5px 0 0 var(--dots), 10px 0 0 var(--dots);
  }
  31% {
    box-shadow: 5px -4px 0 var(--dots), 10px -8px 0 var(--dots);
  }
  32%,
    50% {
    -webkit-transform: translateY(0) rotate(0deg);
            transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  45%,
    100% {
    box-shadow: 5px 0 0 var(--dots), 10px 0 0 var(--dots);
  }
  51%,
    100% {
    opacity: 0;
  }
}
html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

body {
  min-height: 100vh;
  display: flex;
  font-family: 'Roboto', Arial;
  justify-content: center;
  align-items: center;
  background: #ECEFFC;
}

Please copy and paste the Css above and save it in the style.css file. If it has been done let's take the next step, which is to make javascript.

document.querySelectorAll('.add-to-cart').forEach(button => {

    button.addEventListener('click', e => {

        button.classList.toggle('added');

    });

});

Copy and paste into a file such as "button.js". And for the last stage, we implement directly into the html. See the following example:

<button class="add-to-cart">
    <div class="default">Add to cart</div>
    <div class="success">Added</div>
    <div class="cart">
        <div>
            <div></div>
            <div></div>
        </div>
    </div>
    <div class="dots"></div>
</button>

If all the methods and codes have been saved, it's time to see how it works. For an example you can see by clicking the button below.

Live Demo
that's how to make a tutorials animation add to cart button.

Tags: Tutorials

Share this: