<button class="cart-button">
<span class="add-to-cart">Add to cart</span>
<span class="added">Added</span>
<i class="fas fa-shopping-cart"></i>
<i class="fas fa-box"></i>
</button>
<a class="youtube-link" href="https://youtu.be/BVdTKEi269Y" target="_blank">https://youtu.be/BVdTKEi269Y</a>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #ebe8ff;
}
.cart-button {
position: relative;
padding: 10px;
width: 200px;
height: 60px;
border: 0;
border-radius: 10px;
background-color: #4834d4;
outline: none;
cursor: pointer;
color: #fff;
transition: .3s ease-in-out;
overflow: hidden;
}
.cart-button:hover {
background-color: #35269b;
}
.cart-button:active {
transform: scale(.9);
}
.cart-button .fa-shopping-cart {
position: absolute;
z-index: 2;
top: 50%;
left: -10%;
font-size: 2em;
transform: translate(-50%,-50%);
}
.cart-button .fa-box {
position: absolute;
z-index: 3;
top: -20%;
left: 52%;
font-size: 1.2em;
transform: translate(-50%,-50%);
}
.cart-button span {
position: absolute;
z-index: 3;
left: 50%;
top: 50%;
font-size: 1.2em;
color: #fff;
transform: translate(-50%,-50%);
}
.cart-button span.add-to-cart {
opacity: 1;
}
.cart-button span.added {
opacity: 0;
}
.cart-button.clicked .fa-shopping-cart {
animation: cart 1.5s ease-in-out forwards;
}
.cart-button.clicked .fa-box {
animation: box 1.5s ease-in-out forwards;
}
.cart-button.clicked span.add-to-cart {
animation: txt1 1.5s ease-in-out forwards;
}
.cart-button.clicked span.added {
animation: txt2 1.5s ease-in-out forwards;
}
@keyframes cart {
0% {
left: -10%;
}
40%, 60% {
left: 50%;
}
100% {
left: 110%;
}
}
@keyframes box {
0%, 40% {
top: -20%;
}
60% {
top: 40%;
left: 52%;
}
100% {
top: 40%;
left: 112%;
}
}
@keyframes txt1 {
0% {
opacity: 1;
}
20%, 100% {
opacity: 0;
}
}
@keyframes txt2 {
0%, 80% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.youtube-link {
position: fixed;
left: 20px;
bottom: 20px;
color: #000;
text-decoration: none;
font-size: 12px;
}
const cartButtons = document.querySelectorAll('.cart-button');
cartButtons.forEach(button => {
button.addEventListener('click', cartClick);
});
function cartClick() {
let button = this;
button.classList.add('clicked');
}
This Pen doesn't use any external JavaScript resources.