"svg payment"
Bootstrap 3.0.0 Snippet by kbhokray

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class='container'> <div class='col-md-offset-4 col-md-4'> <div class="panel panel-default"> <div class="panel-heading h4"> Payment Portal </div> <div class="panel-body text-center"> <form> <div class='form-group'> <label for="to">Payee</label> <select class="form-control" id="to"> <option>Alisha</option> <option>Babu</option> </select> </div> <div class="form-group mx-sm-3 mb-2"> <label for="amount">Amount</label> <input type="number" class="form-control" id="amount" placeholder="Amount"> </div> </form> <div class='payments'> <div class='button'> Debit <svg class="svg-debit" viewBox="0 0 32 23"> <path class="svg-debit-card" d="M1.993 0h28c1.104 0 2 .895 2 2v18.999c0 1.104-.896 2.001-2 2.001h-28c-1.104 0-2-.896-2-2.001v-18.999c0-1.105.895-2 2-2z" /> <path class="svg-debit-data" d="M12.993 15v2h16v-2h-16zm0 5h10v-2h-10v2zm-4-5h-4c-1.104 0-2 .896-2 2v1c0 1.104.896 2 2 2h4c1.104 0 2-.896 2-2v-1c0-1.104-.896-2-2-2z" /> <path class="svg-debit-sign" d="M2.993 9h26v3h-26v-3z" /> <path class="svg-debit-read" d="M-.007 3h32v3h-32v-3z" /> </svg> </div> <div class='button'> Ethereum <svg class="svg-ether" viewBox="0 0 256 417" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid"> <g> <polygon fill="#343434" points="127.9611 0 125.1661 9.5 125.1661 285.168 127.9611 287.958 255.9231 212.32"/> <polygon fill="#8C8C8C" points="127.962 0 0 212.32 127.962 287.959 127.962 154.158"/> <polygon fill="#3C3C3B" points="127.9611 312.1866 126.3861 314.1066 126.3861 412.3056 127.9611 416.9066 255.9991 236.5866"/> <polygon fill="#8C8C8C" points="127.962 416.9052 127.962 312.1852 0 236.5852"/> <polygon fill="#141414" points="127.9611 287.9577 255.9211 212.3207 127.9611 154.1587"/> <polygon fill="#393939" points="0.0009 212.3208 127.9609 287.9578 127.9609 154.1588"/> </g> </svg> </div> </div> </div> <div class="panel-footer text-center"> <button type="submit" class="btn btn-success">Pay</button> </div> </div> </div> </div> </body> </html>
@import url("https://fonts.googleapis.com/css?family=Roboto"); * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100vh; } body { font: 12px/1 'Roboto', sans-serif; color: #555; background: #eee; } .header { padding: 30px 0; font-size: 20px; text-align: center; border-bottom: 1px solid #bbb; } .main { background: #fff; } .footer { padding: 30px 0; font-size: 14px; text-align: center; color: #aaa; } .footer .devices { margin: 0 0 15px; font-family: fontawesome; font-size: 35px; } .payments { min-width: 320px; } /* * SVG Icons **********************************************************/ svg { display: block; position: absolute; top: 2px; right: 15px; width: 45px; height: 45px; } svg.svg-debit { top: 5px; right: 17px; width: 40px; height: 40px; } .svg-debit-card { fill: #e5e5e5; } .svg-debit-data { fill: #bbb; } .svg-debit-sign { fill: #fff; } .svg-debit-read { fill: #555; } /* * Buttons **********************************************************/ .button { position: relative; height: 50px; padding: 0 0 0 50px; font-size: 14px; line-height: 48px; border-bottom: 1px solid #bbb; background: #fafafa; cursor: pointer; } .button:hover { background: #f5f5f5; } .button:after { content: ''; position: absolute; top: 15px; left: 18px; display: block; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px #bbb, inset 0 0 0 7px #fff; background: #fff; } .button:hover:after { background: #bbb; } .button.active:after { background: #555; } /* * Breakpoint **********************************************************/ @media all and (min-width: 500px) { svg { right: 25px; width: 55px; height: 55px; } svg.svg-debit { top: 4px; right: 27px; width: 50px; height: 50px; } .button { height: 60px; padding: 0 0 0 60px; font-size: 18px; line-height: 58px; } .button:after { top: 20px; left: 23px; } } /* * Breakpoint **********************************************************/ @media all and (min-width: 700px) { svg { top: auto !important; right: 0 !important; left: 0; margin: auto; bottom: 10px; width: 60px; height: 60px; } svg.svg-click { bottom: -2px; width: 90px; height: 90px; } .payments { max-width: 700px; margin: 0 auto; padding: 25px; overflow: hidden; } .button { float: left; width: 100px; height: 150px; margin-right: 10px; padding: 50px 0 0; font-size: 12px; line-height: 1; text-align: center; border: 0; border-radius: 3px; box-shadow: inset 0 0 0 1px #bbb; } .button:last-child { margin-right: 0; } .button:after { top: 15px; left: 40px; } .footer { border-top: 1px solid #bbb; } }
$(document).ready(function() { $('.button').on('click', function() { $('.button').removeClass('active'); $(this).toggleClass('active'); }); });

Questions / Comments: