TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
C# Corner
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Create a Cart Popup div in HTML & CSS
Deeppak Chaoudhary
Mar 04
2016
Code
6.1
k
0
1
facebook
twitter
linkedIn
Reddit
WhatsApp
Email
Bookmark
expand
CartPopup_C# Jadu.zi
<!DOCTYPE html>
<html>
<head>
<meta charset=
"UTF-8"
>
<title>C sharp jadu Cart Popup Example</title>
<style type=
"text/css"
>
/* button style */
.cart {
width: 40px;
height: 40px;
padding: 0;
position: absolute;
left: 50%;
margin-left: 195px;
-moz-border-radius: 9999em;
-webkit-border-radius: 9999em;
border-radius: 9999em;
border: none;
background: #e54040;
cursor: pointer;
}
.cart:hover {
-moz-box-shadow: inset 0 0 7px 0 rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 0 0 7px 0 rgba(0, 0, 0, 0.5);
box-shadow: inset 0 0 7px 0 rgba(0, 0, 0, 0.5);
}
.cart:hover .popup {
visibility: visible;
opacity: 1;
pointer-events: auto;
-webkit-animation-duration: 200ms;
-webkit-animation-name: show-popup;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: cubic-bezier(1, 0.18, 1, 0.93);
-moz-animation-duration: 200ms;
-moz-animation-name: show-popup;
-moz-animation-direction: normal;
-moz-animation-timing-function: cubic-bezier(1, 0.18, 1, 0.93);
-o-animation-duration: 200ms;
-o-animation-name: show-popup;
-o-animation-direction: normal;
-o-animation-timing-function: cubic-bezier(1, 0.18, 1, 0.93);
animation-duration: 200ms;
animation-name: show-popup;
animation-direction: normal;
animation-timing-function: cubic-bezier(1, 0.18, 1, 0.93);
}
/* popup window style */
.popup {
padding: 20px;
visibility: hidden;
opacity: 0;
pointer-events: none;
position: absolute;
top: 100%;
width: 250px;
margin-left: -205px;
margin-top: 20px;
background: #ffffff;
border: 1px solid #cbcbcb;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
}
.popup:after {
position: absolute;
content:
' '
;
top: -30px;
height: 30px;
width: 100%;
}
.popup:before {
position: absolute;
content:
' '
;
left: 220px;
top: -9px;
width: 16px;
height: 16px;
border-top: 1px solid #cbcbcb;
border-right: 1px solid #cbcbcb;
background: #ffffff;
-moz-box-shadow: 1px -1px 1px 0 rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 1px -1px 1px 0 rgba(0, 0, 0, 0.2);
box-shadow: 1px -1px 1px 0 rgba(0, 0, 0, 0.2);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.cart {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDoAABSCAABFVgAADqXAAAXb9daH5AAAAGPSURBVHjajNNNi85RGAbw3zwzI/XMmEHeFYmSvJRSYsOWfAHZ+wAWakp8AAs+A5ImKzujUfKapQnZzIaVxzCYGcMzXRbuydO/Wcxdd+ecq3Ouc67rvk9fkqcY8T8mcA3frSIGcLKBfcMaq4wWpjCNjwi2o71aggGcQT92YBybcLTIZ7ABX7G+xlF8qvWgJMs5kuRFksUkDypPJLmd5FSSW0lOJ7lT+GSSt70E7SQ38i+eJDmSZE+SA0n21bi35heTdJMstnrkzOMlfmELhnEVQxjDOlzBDxwv2c/7kvR6sh+Py8QLeFde9GMJ3arQw/JqrNUwtVMVaWMbFnC51pfwGQfrhR1MNgnm8LpuPVsNdr0236xKncdgyZ0eaBD8xhss4hyOlea1hQ1ha0mZwM8mwRKe4VVJ6K9Daj6PD9V0j7DUNBH6sLNcn8efOtytp7cxW82U3j5Yzs1J7ieZSnI3yXDho0nGC7+XZGMSKxEcSjJbDdVJsrvwww18VxKtFf7HTH2wObwvGfClgS/A3wEAjJAlBBKFdqAAAAAASUVORK5CYII=);
background-repeat: no-repeat;
background-position: center;
}
.checkout {
margin-top: 10px;
padding-left: 20px;
}
.checkout-button {
padding: 3px 5px;
background: #e54040;
-moz-box-shadow: inset 0 2px 7px 0 rgba(255, 255, 255, 0.3);
-webkit-box-shadow: inset 0 2px 7px 0 rgba(255, 255, 255, 0.3);
box-shadow: inset 0 2px 7px 0 rgba(255, 255, 255, 0.3);
border: 1px solid #e06b6b;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
color: #ffffff;
}
.checkout-button:hover {
background: #e54040;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.checkout-button:active {
background: #e54040;
-moz-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div
class
=
"cart"
>
<div
class
=
"popup"
>
<div
class
=
"row checkout"
>
<h4>Items : 5</h4>
<h4>Amount : 2000 Rs</h4>
</div>
<div
class
=
"row checkout"
>
<span>
<a
class
=
"checkout-button"
href=
"#"
>View Cart</a>
</span>
<span
class
=
"checkout-button"
>Checkout</span>
<img src=
"http://4.bp.blogspot.com/-rWU2czr6S0Q/VivJ_UMx7sI/AAAAAAAAAhg/AeOXq3s7TjM/s1600-r/finalc%2523logoPNGupdated.png"
style=
"height:60px;width:120px; margin-top:20px;"
/>
</div>
</div>
</div>
</body>
</html>
Cart popup