WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Um código por efficientapp58
1036
efficientapp58
Abrir no Editor
Publique Seu Código
Recomendado
12 August 2025
Trecho de código de animação de coração CSS
26 May 2025
Um Código por códice
11 March 2025
Um código por stevenolaeem
HTML
Copy
Webleb
OR
Card holder name
Card Number
Expiry Date / CVV
Checkout
CSS
Copy
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300&display=swap'); body{ height: 100vh; overflow: hidden; background: #0f0c29; background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29); background: linear-gradient(to right, #24243e, #302b63, #0f0c29); display: flex; align-items: center; justify-content: center; font-family: "Poppins"; } .modal { background: #FFFFFF; box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1); border-radius: 16px; max-width: 450px; } .form { display: flex; flex-direction: column; gap: 20px; padding: 20px; } .paymentother { display: grid; grid-template-columns: 50% 50%; gap: 20px; padding: 10px; justify-content: center; } .paymentother button { height: 55px; background: #F2F2F2; border-radius: 11px; padding: 0; border: 0; outline: none; } .paymentother button svg { height: 18px; } .paymentother button:last-child svg { height: 22px; } .separator { width: calc(100% - 20px); display: grid; grid-template-columns: 2fr 1fr 2fr; gap: 10px; color: #8B8E98; margin: 0 10px; } .separator p { display: block; text-align: center; font-weight: 600; font-size: 12px; margin: auto; } .separator .line { display: inline-block; width: 100%; height: 1px; border: 0; background-color: #e8e8e8; } .card-info{ display: flex; flex-direction: column; gap: 15px; } .input_container { width: 100%; height: fit-content; display: flex; flex-direction: column; gap: 5px; } .split { display: grid; grid-template-columns: 4fr 2fr; gap: 15px; } .split input { width: 100%; } .input_label { font-size: 12px; color: #8B8E98; font-weight: 600; } .input_field { width: auto; height: 40px; padding: 0 0 0 16px; border-radius: 9px; outline: none; background-color: #F2F2F2; border: 1px solid #e5e5e500; transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1); } .input_field:focus { border: 1px solid transparent; box-shadow: 0px 0px 0px 2px #242424; background-color: transparent; } /* Reset input number styles */ .input_field::-webkit-outer-spin-button, .input_field::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .checkout { position: relative; font-family: inherit; font-weight: 500; font-size: 18px; letter-spacing: 0.05em; border-radius: 0.8em; border: none; background: #302b63; color: ghostwhite; overflow: hidden; } .checkout span { position: relative; transition: color 0.6s; display: inline-flex; align-items: center; padding: 0.8em 1.2em 0.8em 1.05em; } .checkout::before, .checkout::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .checkout::before { content: ""; background: #000; width: 120%; left: -10%; transform: skew(30deg); transition: transform 0.5s cubic-bezier(0.3, 1, 0.8, 1); } .checkout:hover::before { transform: translate3d(100%, 0, 0); } .checkout:active { transform: scale(0.95); }
JS
Copy
Nothing to copy