Create a Cart Popup div in HTML & CSS ~ Asp.net modules

Intoduction :-
Hii Friends...
Today I explain how to Create a Cart Popup div in HTML & CSS . This moduel base on mouse hover when you put your coursor on cart icon. hover selector is used to select elements when you mouse over them. Here i put a example of cart. When we put cursor on it then a popup is open and in this popup you can add that you want.

DEMO:-

Asp.netmodules Cart Popup Example

Example :-

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Asp.netmodules Cart Popup Example</title>
    <style type="text/css">
        /* button style */
        .cart {
            width: 40px;
            height: 40px;
            padding: 0;
            position: absolute;
            left: 50%;
            margin-left: 50px;
            -moz-border-radius: 9999em;
            -webkit-border-radius: 9999em;
            border-radius: 9999em;
            border: none;
            background: rgb(36, 159, 163);
            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: rgb(36, 159, 163);
            -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 rgb(36, 159, 163);
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            color: #ffffff;
        }
            .checkout-button:hover {
                background: rgb(36, 159, 163);
                -moz-box-shadow: none;
                -webkit-box-shadow: none;
                box-shadow: none;
            }
            .checkout-button:active {
                background: rgb(36, 159, 163);
                -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 : 2</h4>
                <h4>Amount : 4000 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhriHfw8KtedIOQ1MQwCVDUdBEtTB7K11-LVZaA9IPxJ1op4wjjue14yF5t3M0akFrTrkosTqywM6QDePPjkK06ALp-zfukLsrPKp7Od0Lx4kTyVGhujfPX2lJWbCspz1lkZ2R-FWoZ44Q/s1600-r/dotnetnew.png" style="height:60px;width:120px; margin-top:20px;"/>
            </div>
        </div>
    </div>
</body>
</html>

Saturday, March 5, 2016

Create a Cart Popup div in HTML & CSS

Example :-

1 comment:

Popular Posts

Blog Archive

About Me