Create a Cart Popup div in HTML & CSS

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.             <title>C sharp jadu Cart Popup Example</title>  
  6.             <style type="text/css">  
  7.         /* button style */  
  8.           
  9.         .cart {  
  10.             width: 40px;  
  11.             height: 40px;  
  12.             padding: 0;  
  13.             position: absolute;  
  14.             left: 50%;  
  15.             margin-left: 195px;  
  16.             -moz-border-radius: 9999em;  
  17.             -webkit-border-radius: 9999em;  
  18.             border-radius: 9999em;  
  19.             border: none;  
  20.             background: #e54040;  
  21.             cursor: pointer;  
  22.         }  
  23.           
  24.         .cart:hover {  
  25.             -moz-box-shadow: inset 0 0 7px 0 rgba(0, 0, 0, 0.5);  
  26.             -webkit-box-shadow: inset 0 0 7px 0 rgba(0, 0, 0, 0.5);  
  27.             box-shadow: inset 0 0 7px 0 rgba(0, 0, 0, 0.5);  
  28.         }  
  29.           
  30.         .cart:hover .popup {  
  31.             visibility: visible;  
  32.             opacity: 1;  
  33.             pointer-events: auto;  
  34.             -webkit-animation-duration: 200ms;  
  35.             -webkit-animation-name: show-popup;  
  36.             -webkit-animation-direction: normal;  
  37.             -webkit-animation-timing-function: cubic-bezier(1, 0.18, 1, 0.93);  
  38.             -moz-animation-duration: 200ms;  
  39.             -moz-animation-name: show-popup;  
  40.             -moz-animation-direction: normal;  
  41.             -moz-animation-timing-function: cubic-bezier(1, 0.18, 1, 0.93);  
  42.             -o-animation-duration: 200ms;  
  43.             -o-animation-name: show-popup;  
  44.             -o-animation-direction: normal;  
  45.             -o-animation-timing-function: cubic-bezier(1, 0.18, 1, 0.93);  
  46.             animation-duration: 200ms;  
  47.             animation-name: show-popup;  
  48.             animation-direction: normal;  
  49.             animation-timing-function: cubic-bezier(1, 0.18, 1, 0.93);  
  50.         }  
  51.         /* popup window style */  
  52.           
  53.         .popup {  
  54.             padding: 20px;  
  55.             visibility: hidden;  
  56.             opacity: 0;  
  57.             pointer-events: none;  
  58.             position: absolute;  
  59.             top: 100%;  
  60.             width: 250px;  
  61.             margin-left: -205px;  
  62.             margin-top: 20px;  
  63.             background: #ffffff;  
  64.             border: 1px solid #cbcbcb;  
  65.             -moz-border-radius: 5px;  
  66.             -webkit-border-radius: 5px;  
  67.             border-radius: 5px;  
  68.             -moz-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);  
  69.             -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);  
  70.             box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);  
  71.         }  
  72.           
  73.         .popup:after {  
  74.             position: absolute;  
  75.             content: ' ';  
  76.             top: -30px;  
  77.             height: 30px;  
  78.             width: 100%;  
  79.         }  
  80.           
  81.         .popup:before {  
  82.             position: absolute;  
  83.             content: ' ';  
  84.             left: 220px;  
  85.             top: -9px;  
  86.             width: 16px;  
  87.             height: 16px;  
  88.             border-top: 1px solid #cbcbcb;  
  89.             border-right: 1px solid #cbcbcb;  
  90.             background: #ffffff;  
  91.             -moz-box-shadow: 1px -1px 1px 0 rgba(0, 0, 0, 0.2);  
  92.             -webkit-box-shadow: 1px -1px 1px 0 rgba(0, 0, 0, 0.2);  
  93.             box-shadow: 1px -1px 1px 0 rgba(0, 0, 0, 0.2);  
  94.             -moz-transform: rotate(-45deg);  
  95.             -ms-transform: rotate(-45deg);  
  96.             -webkit-transform: rotate(-45deg);  
  97.             transform: rotate(-45deg);  
  98.         }  
  99.           
  100.         .cart {  
  101.             background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDoAABSCAABFVgAADqXAAAXb9daH5AAAAGPSURBVHjajNNNi85RGAbw3zwzI/XMmEHeFYmSvJRSYsOWfAHZ+wAWakp8AAs+A5ImKzujUfKapQnZzIaVxzCYGcMzXRbuydO/Wcxdd+ecq3Ouc67rvk9fkqcY8T8mcA3frSIGcLKBfcMaq4wWpjCNjwi2o71aggGcQT92YBybcLTIZ7ABX7G+xlF8qvWgJMs5kuRFksUkDypPJLmd5FSSW0lOJ7lT+GSSt70E7SQ38i+eJDmSZE+SA0n21bi35heTdJMstnrkzOMlfmELhnEVQxjDOlzBDxwv2c/7kvR6sh+Py8QLeFde9GMJ3arQw/JqrNUwtVMVaWMbFnC51pfwGQfrhR1MNgnm8LpuPVsNdr0236xKncdgyZ0eaBD8xhss4hyOlea1hQ1ha0mZwM8mwRKe4VVJ6K9Daj6PD9V0j7DUNBH6sLNcn8efOtytp7cxW82U3j5Yzs1J7ieZSnI3yXDho0nGC7+XZGMSKxEcSjJbDdVJsrvwww18VxKtFf7HTH2wObwvGfClgS/A3wEAjJAlBBKFdqAAAAAASUVORK5CYII=);  
  102.             background-repeat: no-repeat;  
  103.             background-position: center;  
  104.         }  
  105.           
  106.         .checkout {  
  107.             margin-top: 10px;  
  108.             padding-left: 20px;  
  109.         }  
  110.           
  111.         .checkout-button {  
  112.             padding: 3px 5px;  
  113.             background: #e54040;  
  114.             -moz-box-shadow: inset 0 2px 7px 0 rgba(255, 255, 255, 0.3);  
  115.             -webkit-box-shadow: inset 0 2px 7px 0 rgba(255, 255, 255, 0.3);  
  116.             box-shadow: inset 0 2px 7px 0 rgba(255, 255, 255, 0.3);  
  117.             border: 1px solid #e06b6b;  
  118.             -moz-border-radius: 3px;  
  119.             -webkit-border-radius: 3px;  
  120.             border-radius: 3px;  
  121.             color: #ffffff;  
  122.         }  
  123.           
  124.         .checkout-button:hover {  
  125.             background: #e54040;  
  126.             -moz-box-shadow: none;  
  127.             -webkit-box-shadow: none;  
  128.             box-shadow: none;  
  129.         }  
  130.           
  131.         .checkout-button:active {  
  132.             background: #e54040;  
  133.             -moz-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);  
  134.             -webkit-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);  
  135.             box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);  
  136.         }  
  137.     </style>  
  138.         </head>  
  139.         <body>  
  140.             <div class="cart">  
  141.                 <div class="popup">  
  142.                     <div class="row checkout">  
  143.                         <h4>Items : 5</h4>  
  144.                         <h4>Amount : 2000 Rs</h4>  
  145.                     </div>  
  146.                     <div class="row checkout">  
  147.                         <span>  
  148.                             <a class="checkout-button" href="#">View Cart</a>  
  149.                         </span>  
  150.                         <span class="checkout-button">Checkout</span>  
  151.                         <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;" />  
  152.                     </div>  
  153.                 </div>  
  154.             </div>  
  155.         </body>  
  156.     </html>