🚀 Shopping Button Design: Day 03 of My 20-Day Challenge!
Welcome to Day 03 of my 20-day button development challenge! 🎉 Over the next few weeks, I’ll be exploring the world of buttons, crafting unique designs using HTML and CSS that you can use to enhance your web projects.
Today's journey kicks off with building a sleek hover transition button that will add a touch of style to any webpage! 💻✨
If you're passionate about leveling up your front-end skills or just curious to learn some neat CSS tricks, then buckle up because you're in the right place! 🙌 Follow along as I guide you through each step of the code, breaking down the design elements and functionality.
👉 Don’t forget to hit that like button, subscribe, and turn on notifications so you never miss an update! Let’s make coding fun and creative together! 💖
📝 What We’ll Cover:
- 🌐 HTML structure for the button design
- 🎨 CSS styling for a seamless look
- 💡 Hover effects to enhance user experience
👀 Watch & Learn
🔗 Video Tutorial: Check out the detailed video tutorial below to see how to build this transaction button from scratch. I’ll walk you through every line of code and explain the logic behind each step! 👇
💻 Code for the Transaction Button
Ready to get your hands on the code? 💪 Here’s the complete HTML and CSS you need to create this awesome button. Copy the code, run it, and watch the magic unfold! 🪄✨
📄 HTML Code
<div class="container">
<button>
<span>
<div class="caddie">
<div class="caddie__top-support"></div>
<div class="caddie__top"></div>
<div class="caddie__body"></div>
<div class="caddie__trou"></div>
<div class="caddie__trou2"></div>
<div class="caddie__body-left"></div>
<div class="caddie__roue"></div>
<div class="caddie__roue2"></div>
<div class="caddie__trou3"></div>
</div>Add to cart
</span>
<div>
<div>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
<div>
<div></div>
<div></div>
</div>
<!-- objet -->
<div>
<div>
<div></div>
<div></div>
</div>
</div>
<!-- notification succes -->
<div>
<div>$9.99</div>
</div>
<!-- notification cancel -->
<div>
<div>Canceled</div>
</div>
</button>
</div>
🎨 CSS Code
body {
background-color: #eceffc;
display: -webkit-box;
display: -ms-flexbox;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 100vh;
}
button {
background-color: #fff700;
color: black;
border: none;
padding: 0 20px;
line-height: 50px;
border-radius: 10px;
-webkit-box-shadow: -2px 3px 0px #d4d4d4;
box-shadow: -2px 3px 0px #d4d4d4;
font-weight: 600;
cursor: pointer;
-webkit-transition-property: line-height;
-o-transition-property: line-height;
transition-property: line-height;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
button:focus {
outline: 0;
}
.tapis-roulant {
position: relative;
background-color: gray;
line-height: 0px;
}
.tapis-roulant span {
opacity: 0;
}
.tapis-roulant > div:nth-child(2) {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
border-radius: 20px;
z-index: 2;
background-color: gray;
}
.tapis-roulant > div:nth-child(2) > div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 20px;
width: 200%;
border-radius: 30px;
-webkit-animation-name: roule;
animation-name: roule;
-webkit-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.tapis-roulant i {
height: 100%;
width: 2px;
background-color: #656565;
display: inline-block;
-webkit-transform: skew(52deg, 20deg);
-ms-transform: skew(52deg, 20deg);
transform: skew(52deg, 20deg);
margin: 0 2%;
}
/* caisse */
.tapis-roulant > div:nth-child(3) {
position: absolute;
left: 55%;
width: 35px;
height: 0;
background-color: #000000;
z-index: 1;
bottom: 0;
-webkit-animation-name: caisse;
animation-name: caisse;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-delay: 0.05s;
animation-delay: 0.05s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
overflow: hidden;
border: 2px solid #a0a0a0;
}
.tapis-roulant > div:nth-child(3) > div:first-child {
position: absolute;
z-index: 4;
width: 100%;
height: 75%;
background-image: -o-linear-gradient(
81deg,
rgba(84, 84, 84, 0),
hsl(0deg 0% 56% / 61%) 70%
);
background-image: linear-gradient(
9deg,
rgba(84, 84, 84, 0),
hsl(0deg 0% 56% / 61%) 70%
);
top: 0;
}
.tapis-roulant > div:nth-child(3) > div:nth-child(2) {
background: red;
width: 1px;
height: 1px;
position: absolute;
left: 50%;
top: 46%;
-webkit-box-shadow: -4px 16px 20px 12px red;
box-shadow: -4px 16px 20px 12px red;
z-index: 6;
border-radius: 100%;
}
.tapis-roulant > div:nth-child(4) {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 34px;
overflow: hidden;
}
.tapis-roulant > div:nth-child(4) > div:first-child {
position: absolute;
width: 29px;
height: 100%;
background: #ebca79;
-webkit-box-shadow: 0 2px 0 0px rgb(0 0 0 / 25%),
inset 0 1px 0 0 rgb(255 255 255 / 20%);
box-shadow: 0 2px 0 0px rgb(0 0 0 / 25%),
inset 0 1px 0 0 rgb(255 255 255 / 20%);
z-index: 9;
-webkit-animation-name: objet;
animation-name: objet;
-webkit-animation-duration: 3.8s;
animation-duration: 3.8s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
left: -10px;
bottom: 3px;
}
.tapis-roulant > div:nth-child(4) > div:first-child:after {
content: "";
width: 100%;
height: 70%;
background: rgba(0, 0, 0, 0.12);
position: absolute;
top: 0px;
left: 0px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.tapis-roulant > div:nth-child(4) > div:first-child > div:first-child {
width: 3px;
height: 3px;
background: #37353a;
position: absolute;
border-radius: 50%;
left: 5px;
top: 8px;
}
.tapis-roulant > div:nth-child(4) > div:first-child > div:first-child:after {
content: "";
width: 3px;
height: 3px;
background: #37353a;
position: absolute;
border-radius: 50%;
left: 16px;
}
.tapis-roulant > div:nth-child(4) > div:first-child > div:nth-child(2) {
width: 10px;
height: 10px;
position: absolute;
border-style: solid;
border-width: 3px;
border-color: transparent #fff #fff #fff;
border-radius: 0 0 50% 50%;
left: 7px;
top: 8px;
z-index: 10;
-webkit-box-shadow: 0 4px 0 0px rgb(0 0 0 / 20%);
box-shadow: 0 4px 0 0px rgb(0 0 0 / 20%);
-webkit-transition: height 0.5s, -webkit-transform 0.5s;
transition: height 0.5s, -webkit-transform 0.5s;
-o-transition: transform 0.5s, height 0.5s;
transition: transform 0.5s, height 0.5s;
transition: transform 0.5s, height 0.5s, -webkit-transform 0.5s;
}
button > div:nth-child(5) {
position: absolute;
top: -40px;
right: 10px;
color: orange;
display: none;
font-size: 12px;
z-index: 9;
}
.tapis-roulant.added > div:nth-child(5) {
display: block;
-webkit-animation-name: fadeOutTop;
animation-name: fadeOutTop;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
opacity: 0;
}
button > div:nth-child(6) {
position: absolute;
top: -50px;
left: 10px;
display: none;
color: red;
}
.tapis-roulant.canceled > div:nth-child(6) {
display: block;
-webkit-animation-name: scaleZoomOutTop;
animation-name: scaleZoomOutTop;
-webkit-animation-duration: 1s;
animation-duration: 1s;
opacity: 0;
}
.container {
position: relative;
height: 60px;
margin: auto;
line-height: 60px;
}
@-webkit-keyframes roule {
from {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
to {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
}
@keyframes roule {
from {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
to {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
}
@-webkit-keyframes objet {
from {
left: -10px;
}
to {
left: 200px;
}
}
@keyframes objet {
from {
left: -10px;
}
to {
left: 200px;
}
}
@-webkit-keyframes caisse {
from {
height: 0;
}
to {
height: 22px;
}
}
@keyframes caisse {
from {
height: 0;
}
to {
height: 22px;
}
}
@-webkit-keyframes fadeOutTop {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@keyframes fadeOutTop {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
.scaleZoomOutTop {
-webkit-animation-name: scaleZoomOutTop;
animation-name: scaleZoomOutTop;
}
@-webkit-keyframes scaleZoomOutTop {
30%,
50% {
-webkit-transform: scale(0.7);
transform: scale(0.7);
}
60% {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: scale(0.7);
transform: scale(0.7);
}
}
@keyframes scaleZoomOutTop {
30%,
50% {
-webkit-transform: scale(0.7);
transform: scale(0.7);
}
60% {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: scale(0.7);
transform: scale(0.7);
}
}
.caddie {
position: relative;
display: inline-block;
width: 20px;
height: 17px;
vertical-align: -6px;
margin-right: 10px;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.tapis-roulant .caddie {
height: 0;
line-height: 0;
overflow: hidden;
font-size: 0;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
.caddie__body {
width: 92%;
height: 60%;
background: #edefff;
-webkit-transform: skew(-6deg);
-ms-transform: skew(-6deg);
transform: skew(-6deg);
position: absolute;
top: 0;
right: 0px;
border-radius: 2px;
border: 1px solid black;
border-left: none;
}
.caddie__body-left {
position: absolute;
background-color: #ced5ff;
left: -1%;
top: 1%;
width: 84%;
height: 60%;
border-left: 1px solid black;
border-radius: 2px;
border-top-left-radius: 8%;
border-top: 1px solid black;
border-top-right-radius: 0;
}
.caddie__top {
position: absolute;
top: -23%;
left: -2.5%;
width: 2px;
height: 27%;
-webkit-transform: skew(19deg);
-ms-transform: skew(19deg);
transform: skew(19deg);
background-color: black;
}
.caddie__top-support {
position: absolute;
top: -30%;
left: -12.5%;
background-color: #757575;
width: 4px;
height: 2px;
border-radius: 10px;
z-index: 2;
}
.caddie__trou {
width: 17px;
height: 1px;
background-color: #7f8dd8;
border-radius: 10px;
position: absolute;
top: 4px;
left: 7%;
z-index: 9;
}
.caddie__trou2 {
width: 11px;
height: 1px;
background-color: #7f8dd8;
border-radius: 10px;
position: absolute;
top: 9px;
left: 18%;
z-index: 9;
}
.caddie__trou3 {
width: 11px;
height: 1px;
background-color: #7f8dd8;
border-radius: 10px;
position: absolute;
top: 6px;
left: 18%;
z-index: 9;
}
.caddie__roue {
position: absolute;
bottom: -1px;
left: 2px;
width: 3px;
height: 3px;
background-color: #808080;
border-radius: 100%;
border: 1px solid black;
}
.caddie__roue2 {
position: absolute;
bottom: -1px;
left: 11px;
width: 3px;
height: 3px;
background-color: #808080;
border-radius: 100%;
border: 1px solid black;
}
JavaScript Code
const button = document.querySelector("button");
let timer;
let timer2;
const audio = new Audio("https://lasonotheque.org/UPLOAD/mp3/1417.mp3");
button.addEventListener("click", function () {
if (!this.classList.contains("added")) {
clearTimeout(timer);
clearTimeout(timer2);
}
if (
this.classList.contains("tapis-roulant") &&
!this.classList.contains("added")
) {
document.querySelector(
".tapis-roulant>div:nth-child(4)>div"
).style.animationPlayState = "paused";
document.querySelector(
".tapis-roulant>div:nth-child(2)>div"
).style.animationPlayState = "paused";
this.style.pointerEvents = "none";
this.classList.add("canceled");
setTimeout(() => {
this.style.pointerEvents = "initial";
this.classList.remove("tapis-roulant");
this.classList.remove("canceled");
}, 1000);
}
if (!this.classList.contains("tapis-roulant")) {
this.classList.add("tapis-roulant");
document.querySelector(
".tapis-roulant>div:nth-child(4)>div"
).style.animationPlayState = "running";
document.querySelector(
".tapis-roulant>div:nth-child(2)>div"
).style.animationPlayState = "running";
timer = setTimeout(() => {
this.classList.add("added");
audio.play();
this.style.pointerEvents = "none";
timer2 = setTimeout(() => {
this.classList.remove("added");
this.classList.remove("tapis-roulant");
this.style.pointerEvents = "initial";
}, 1600);
}, 1400);
}
});
🎉 Wrapping Up
I hope you had as much fun building this shopping button as I did! 😄 With just a few lines of code, you can transform a simple button into something truly eye-catching and interactive.
If you loved this design, share it with your friends and follow our page for more creative ideas and challenges coming your way! Let's keep this coding journey going! 🚀💡
Stay tuned for Day 03 where we'll explore a brand-new button design that will take your front-end skills to the next level! 🔥
Thanks for joining me on this challenge, and see you tomorrow for more button magic! ✌️✨
