Create a Cart Popup div in HTML & CSS

<!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>