PayPal Logo CSS

HTML
<div class="container"> <span class="paypal"></span> </div>
CSS
body { background: #f1f1f1; } .container { position: absolute; width: 200px; height: 200px; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px; box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1), 0px 1px 5px rgba(0, 0, 0, 0.1); border-radius: 10px; background: #fafafa; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; cursor: pointer; } .container:after { content: ""; position: absolute; width: 10px; height: 10px; left: 56px; bottom: 52.05px; background: #1934AB; -webkit-transform: skew(-10deg); transform: skew(-10deg); } .container:hover { box-shadow: 0px 15px 40px 5px rgba(0, 0, 0, 0.2), 0px 5px 10px rgba(0, 0, 0, 0.2); } .paypal { position: relative; display: block; width: 30px; height: 100px; left: 50%; top: 50%; margin-left: -55px; margin-top: -60px; background: rgba(0, 30, 162, 0.9); border-radius: 5px 0px 5px 5px; -webkit-transform: skew(-10deg) scaleY(1.15); transform: skew(-10deg) scaleY(1.15); -webkit-filter: drop-shadow(30px 20px 0px #009cde); filter: drop-shadow(30px 20px 0px #009cde); } .paypal:before { content: ""; position: absolute; width: 0px; height: 0px; top: 65px; left: 30px; border-top: 2px solid rgba(0, 30, 162, 0.9); border-left: 2px solid rgba(0, 30, 162, 0.9); border-right: 4px solid transparent; border-bottom: 4px solid transparent; } .paypal:after { content: ""; position: absolute; width: 60px; height: 65px; left: 29.5px; background: inherit; border-radius: 0px 40px 55px 0px; }
JAVASCRIPT
Expand for more options Login