10+ CSS Checkout Form Examples

This post contains a total of 10+ CSS Checkout ( Payment ) Form Examples with Source Code. All these Checkout Forms are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Checkout Form Examples

1. By Nam

Made by Nam. Simple Checkout Form. Source

CSS Checkout Form by Nam
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<style>
.contact-form{
  background-color:white;
  margin-top:100px;
  padding:50px;
  
}
body{
   background-image: linear-gradient(to right, #52C5FB , #DF85F7);
}
h1{
  margin-top:100px;
}
footer{
  margin-top:100px;
}
#form{
  font-size:60px;
  color:white;
}
h2{
  font-size:45px;
  color:rgb(0,150,220);
}
#check2{
  border-right:1px solid #000;
}
.center-btn {
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  
}
</style>
</head>
<body>
  <h1 align="center" id="form">Checkout Form Widget</h1>
<div class="container contact-form">
    <div class="row" style="border-right:solid,1px">
      <div class="col-md-6" id="check2">
        <h2>Checkout Form</h2>
        <br>
        <h4 style="padding-bottom:30px;">Select shopping method</h4>
        <div class="radio" style="font-size:22px;padding-left:40px;">
          <input type="radio" id="check1" name="radio1" checked >
          <label for="check1">USPS Express Mail</label>
          <br>
          <input type="radio" id="check2" name="radio1">
          <label for="check2" style="margin-bottom:35%">FexEx</label>
        </div>
         <div class="col-sm-5 mr-5" sytle=" border-right: 1px solid #000;">
       
    </div>
        <button type = "button" class = "btn btn-primary btn-lg btn-block" >
      Checkout with PayPal
      </button>
      </div>
        
      <div class="col-md-6">
          <div class="row" >
            <div class="col-md-8" style="font-size:45px;">Total Price</div>
            <div class="col-md-4" style="font-size:45px;">$150</div>
             <p class="col-md-10">Shopping cart 2 products</p>
          </div>
          <div class="row">
           <div class="col-md-7 form-group">
             <label><input type="text"  class ="form-control" placeholder="Name"style="width:290px;height:50px;background-color:#ede8e8">
            </label>
          </div>
          <div class="col-md-2">
            <label><input type="text" placeholder="MM" class="form-control" style="width:70px;height:50px;background-color:#ede8e8""></label>
          </div>
          <div class="col-md-2">
            <label><input type="text" placeholder="YY" class="form-control" style="width: 90px;height:50px;background-color:#ede8e8""></label>
          </div>
      </div>
   <div class="row form-group" style="margin-bottom:32%">
    <div class="col-sm-12 col-lg-8"> 
      <input width="100%" class="form-control" type="text" placeholder="44444.33333.22222.11111" style="height:50px;background-color:#ede8e8;">
    </div>
    <div class="col-sm-12 col-lg-4">
      <input class="form-control" type="text" placeholder="CVC" style="height:50px;background-color:#ede8e8">
    </div>
   </div>
        <button type = "button" class = " btn btn-primary btn-lg btn-block ">
      Checkout with credit card
      </button>
  </div>
 </div>
  </div>
</div>
<footer class="container">
      <div class="row text-center">
        <p class="col-sm-12">&copy; 2016 Checkout Form Widget. All rights reserved | Template by W3layouts</p>
      </div>
    </footer>
</body>
</html>

2. By Kromonaut

Made by Kromonaut. Credit Card Checkout form With Image on Left Side. Source

CSS Checkout Form by Kromonaut
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url("https://fonts.googleapis.com/css?family=Muli:200,200i,400,400i,700,800,800i");
body {
  background: #49425A;
  font-family: "Muli", sans-serif;
}

.container {
  margin: auto;
  width: 1200px;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-body {
  width: 1000px;
  height: 600px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  flex-direction: column;
  background: #EBF1EB;
  box-shadow: 0px 5px 12px 2px rgba(0, 0, 0, 0.1);
}

.breadcrumb {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  align-content: center;
  color: #B0636D;
  font-size: 1.1rem;
  font-weight: 200;
  padding: 2rem;
}

.confirmed {
  color: #6a9858;
  font-weight: 800;
  font-style: italic;
  opacity: 0.6;
}

.active {
  font-weight: 800;
  font-style: italic;
  border-bottom: 3px solid #49425a;
  color: #49425a;
}

.next {
  color: #49425A;
  font-weight: 400;
  font-style: italic;
  opacity: 0.6;
}

.payment {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.creditcard {
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.thecard {
  width: 365px;
  height: 225px;
  display: flex;
  flex-direction: column;
  background: #49425A;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  box-shadow: 0px 4px 15px 1px rgba(0, 0, 0, 0.3);
  text-shadow: 0 1px 0 black;
}

.top-card {
  display: flex;
}

.card-info {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 3rem;
  color: #EBF1EB;
}
.card-info div {
  margin: 0.3rem 0;
}
.card-info .card-number {
  font-size: 1.2rem;
  font-weight: 400;
  font-style: italic;
}

.circle {
  width: 50px;
  height: 50px;
  margin: 20px;
  border-radius: 50%;
  background: #C54177;
}
.circle:before {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  margin: 15px 10px;
  border-radius: 50%;
  background: #E0BF73;
}

.card-title {
  margin: 20px;
  margin-left: -40px;
  z-index: 1;
  color: #EBF1EB;
  font-style: italic;
  font-weight: 700;
  font-size: 2rem;
}

.form {
  width: 50%;
  height: 100%;
  margin: 0 50px;
  display: flex;
  justify-content: center;
}

form {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: "Muli", sans-serif;
  color: #49425a;
  font-size: 0.9rem;
  font-weight: 400;
}

label {
  margin-bottom: 0.3rem;
}

input, select {
  margin-bottom: 1.3rem;
  padding: 1rem;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0);
  outline: none;
  font-size: 1.1rem;
  line-height: 1.1rem;
  font-family: "Muli", sans-serif;
  background: #FFF;
  color: #49425a;
  transition: all 300ms ease;
}
input:hover, select:hover {
  transition: all 300ms ease;
  border: 1px solid #49425A;
}

.small {
  width: 100%;
  display: flex;
}
.small label {
  display: block;
}
.small p {
  width: 200px;
  margin-left: 1rem;
  align-self: center;
}

select {
  width: 45%;
  height: 3.3rem;
}

.date {
  display: flex;
  justify-content: space-between;
}
.date label {
  display: block;
}

button {
  font-size: 1.1rem;
  font-weight: 800;
  font-style: italic;
  font-family: "Muli", sans-serif;
  background: #6a9858;
  color: #EBF1EB;
  padding: 1rem;
  border-radius: 5px;
  border: none;
  outline: none;
  cursor: pointer;
  transition: all 300ms ease;
}
button:hover {
  background: #3c9858;
}
</style>
</head>
<body>
  <div class="container">
  
  <div class="card-body">
    
    <div class="breadcrumb">
      <div class="confirmed">Sign In</div>
      <div class="confirmed">Shipping Details</div>
      <div class="active">Payment Method</div>
      <div class="next">Confirm Order</div>
    </div>
    
    <div class="payment">
      
      <div class="creditcard">
        <div class="thecard">
          <div class="top-card">
            <div class="circle"></div>
            <div class="card-title">
              The Card
            </div>
          </div>
          <div class="card-info">
            <div class="card-number">
            1234 5678 9012 3456
            </div>
            <div class="exp-date">
              01 / 2018
            </div>
            <div class="card-holder">
              John Doe
            </div>
          </div>
        </div>
      </div>
    
      <div class="form">
        <form action="" method="get">
          <label for="cardnumber">Card Number</label>
          <input type="text" id="cardnumber" placeholder="1234 5678 9012 3456">
          <label for="cardholder">Card Holder</label>
          <input type="text" id="cardholder" placeholder="John Doe">
          <label for="exp">Expiration Date</label>
          <div class="date">
              <select name="month" id="month">
                <option value="january">January</option>
                <option value="february">February</option>
                <option value="march">March</option>
                <option value="april">April</option>
                <option value="may">May</option>
                <option value="june">June</option>
                <option value="july">July</option>
                <option value="august">August</option>
                <option value="september">September</option>
                <option value="october">October</option>
                <option value="november">November</option>
                <option value="december">December</option>
              </select>
              <select name="Year">
                <option value="2018">2018</option>
                <option value="2019">2019</option>
                <option value="2020">2020</option>
                <option value="2021">2021</option>
                <option value="2022">2022</option>
                <option value="2023">2023</option>
                <option value="2024">2024</option>
              </select>
            </div>
          <div class="small">
            <div class="cvc">
              <label for="cvc">CVC</label>
              <input type="text" id="cvc" maxlength="3" size="4" placeholder="123">
            </div>
            <p>Three or four digits, usually found on the back of the card</p>
          </div>
          <button>Proceed</button>
        </form>
      </div>  
    </div> 
  </div>
</div>
</body>
</html>

3. By rajeshdn

Made by rajeshdn. Payment Checkout Form UI. Source

CSS Checkout Form by Rajeshdn
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  text-decoration: none;
   font-family: 'Josefin Sans', sans-serif;
}

body{
  background: url("https://i.imgur.com/zzKx5Dx.jpg") no-repeat center center;
  background-size: cover;
  width: 100%;
  height: 100vh;
}

.wrapper{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 500px;
  height: 350px;
}

.checkout_wrapper{
  width: 500px;
  height: 350px;
  display: flex;
}

.checkout_wrapper .product_info{
  width: 45%;
  background: #e85c4d;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  position: relative;
}

.checkout_wrapper .product_info img{
  width: 240px;
  margin-top: 30px;
  margin-left: 5px;
}

.checkout_wrapper .checkout_form{
  width: 55%;
  background: #fff;
  padding: 50px 30px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

.checkout_wrapper .product_info .content{
  text-align: center;
  margin-top: 25px;
  color: #fff;
  text-transform: uppercase;
}

.checkout_wrapper .product_info .content h3{
  font-size: 18px;
  line-height: 18px;
  letter-spacing: 3px;
}

.checkout_wrapper .product_info .content p{
  margin-top: 10px;
  font-size:14px;
}

.checkout_form p{
  margin-bottom: 25px;
  font-size: 20px;
  text-transform: uppercase;
}

.checkout_form .details .section{
  margin-bottom: 15px;
}

.checkout_form .details .section input[type="text"]{
  width: 100%;
  padding: 10px;
  border: 2px solid #dddddd;
}

.checkout_form .details .section input[type="text"]:focus{
  border: 2px solid #e85c4d;
}

.checkout_form .details .section.last_section{
  display: flex;
  justify-content: space-between;
}

.checkout_form .details .section.last_section .item{
  width: 48%;
}

.checkout_form .details .btn{
  background: #e85c4d;
  padding: 10px;
  border-radius: 25px;
  text-align: center;
  margin-top: 25px;
}

.checkout_form .details .btn a{
  color: #fff;
  letter-spacing: 5px;
  display: block;
}
</style>
</head>
<body>
  <div class="wrapper">
  <div class="checkout_wrapper">
    <div class="product_info">
      <img src="https://i.imgur.com/Jqq0Osu.png" alt="product">
      <div class="content">
        <h3>Puma Men's <br/>Sneakers</h3>
        <p>$50</p>
      </div>
    </div>
    <div class="checkout_form">
      <p>Payment Section</p>
      <div class="details">
        <div class="section">
          <input type="text" placeholder="Card Number">
        </div>
        <div class="section">
          <input type="text" placeholder="Cardholder Name">
        </div>
        <div class="section last_section">
          <div class="item">
            <input type="text" placeholder="Expiry Date">
          </div>
          <div class="item">
            <input type="text" placeholder="CVV">
          </div>
        </div>
        
        <div class="btn">
          <a href="#">Pay</a>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

4. By Maria Teresa Bautista

Made by Maria Teresa Bautista. Minimalistic Credit Card Checkout Form. Source

CSS Checkout Form by Maria Teresa Bautista
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'>
  
<style>
body, input, label {
  font-family: "Abel", "Roboto", "Avenir Next", "avenir-next", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

body {
  background: #e9e9e7;
}

p, a, label {
  font-size: 14px;
  text-transform: capitalize;
  color: #6a6969;
}

.card-checkout {
  max-width: 500px;
  margin: 100px auto;
  background: #fff;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  overflow: hidden;
}
.card-checkout > .heading {
  display: inline-block;
  background: #fff;
  padding: 24px 32px 0 48px;
  text-transform: capitalize;
  font-family: "Lato", sans-serif;
  letter-spacing: 0.08em;
}
.card-checkout > .heading > .icon {
  color: #5ab45a;
  font-size: 1.5em;
}
.card-checkout > .content {
  padding: 24px 32px 32px 40px;
}

.input-group {
  display: flex;
  -webkit-appearance: none;
  border-radius: 8px;
  border: 2px solid #ccd7e0;
  background: #fdfdfc;
  padding: 0;
  font-weight: normal;
  color: #345;
  width: 270px;
}

.input-group > .form-control {
  width: 100%;
  padding: 12px;
}

.form-control {
  -webkit-appearance: none;
  border-radius: 16px;
  border: none;
  background: #fdfdfc;
  padding: 8px;
  font-weight: normal;
  color: #345;
}

.button {
  -webkit-appearance: none;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  background-image: none;
  border: 1px solid transparent;
  padding: 12px 12px;
  font-size: 14px;
  border-radius: 12px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #fff;
  background: #4268b3;
  letter-spacing: 0.08em;
}
.button.-primary {
  padding: 8px;
  background: #5ab45a;
}
</style>
</head>
<body>
  <div class='card-checkout'>
  <div class='heading'>
    <h3>payment details</h3>
    <label>credit card information</label>
    <i class='icon ion-card'></i>
  </div>
  <div class='content'>
    <label>name on the card</label>
    <div class='input-group'>
      <input class='form-control' type='text'>
    </div>
    <label>card number</label>
    <div class='input-group'>
      <input class='form-control' type='text'>
    </div>
    <label>expiration date</label>
    <div class='input-group'>
      <input class='form-control' type='text'>
    </div>
    <label>ccv/cvv</label>
    <div class='input-group'>
      <input class='form-control' type='text'>
    </div>
    <br>
    <input class='button -primary' type='submit' value='Place Your Order'>
  </div>
</div>
</body>
</html>

5. By Brianna

Made by Brianna. Responsive Checkout Form. Source

CSS Checkout Form by Brianna
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body {
  font-family: Arial;
  font-size: 17px;
  padding: 8px;
  background-image: url('data:image/svg+xml,%3Csvg width="52" height="26" viewBox="0 0 52 26" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%239C92AC" fill-opacity="0.4"%3E%3Cpath d="M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z" /%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}

h1 {
  text-align: center;
}

* {
  box-sizing: border-box;
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap; 
  flex-wrap: wrap;
  margin: 0 -16px;
}

.col-25 {
  -ms-flex: 25%; 
  flex: 25%;
}

.col-50 {
  -ms-flex: 50%; 
  flex: 50%;
}

.col-75 {
  -ms-flex: 75%; 
  flex: 75%;
}

.col-25,
.col-50,
.col-75 {
  padding: 0 16px;
}

.container {
  background-color: #f2f2f2;
  padding: 5px 20px 15px 20px;
  border: 1px solid lightgrey;
  border-radius: 3px;
}

input[type=text] {
  width: 100%;
  margin-bottom: 20px;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

label {
  margin-bottom: 10px;
  display: block;
}

.icon-container {
  margin-bottom: 20px;
  padding: 7px 0;
  font-size: 24px;
}

.btn {
  background-color: #4CAF50;
  color: white;
  padding: 12px;
  margin: 10px 0;
  border: none;
  width: 100%;
  border-radius: 3px;
  cursor: pointer;
  font-size: 17px;
}

.btn:hover {
  background-color: #45a049;
}

a {
  color: #2196F3;
}

hr {
  border: 1px solid lightgrey;
}

span.price {
  float: right;
  color: grey;
}

/* Responsive layout */
@media (max-width: 800px) {
  .row {
    flex-direction: column-reverse;
  }
  .col-25 {
    margin-bottom: 20px;
  }
}
</style>
</head>
<body>
  <html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<h1>Responsive Checkout Form</h1>
<div class="row">
  <div class="col-75">
    <div class="container">
      <form action="/action_page.php">
      
        <div class="row">
          <div class="col-50">
            <h3>Billing Address</h3>
            <label for="fname"><i class="fa fa-user"></i> Full Name</label>
            <input type="text" id="fname" name="firstname" placeholder="John M. Doe">
            <label for="email"><i class="fa fa-envelope"></i> Email</label>
            <input type="text" id="email" name="email" placeholder="[email protected]">
            <label for="adr"><i class="fa fa-address-card-o"></i> Address</label>
            <input type="text" id="adr" name="address" placeholder="542 W. 15th Street">
            <label for="city"><i class="fa fa-institution"></i> City</label>
            <input type="text" id="city" name="city" placeholder="New York">

            <div class="row">
              <div class="col-50">
                <label for="state">State</label>
                <input type="text" id="state" name="state" placeholder="NY">
              </div>
              <div class="col-50">
                <label for="zip">Zip</label>
                <input type="text" id="zip" name="zip" placeholder="10001">
              </div>
            </div>
          </div>

          <div class="col-50">
            <h3>Payment</h3>
            <label for="fname">Accepted Cards</label>
            <div class="icon-container">
              <i class="fa fa-cc-visa" style="color:navy;"></i>
              <i class="fa fa-cc-amex" style="color:blue;"></i>
              <i class="fa fa-cc-mastercard" style="color:red;"></i>
              <i class="fa fa-cc-discover" style="color:orange;"></i>
            </div>
            <label for="cname">Name on Card</label>
            <input type="text" id="cname" name="cardname" placeholder="John More Doe">
            <label for="ccnum">Credit card number</label>
            <input type="text" id="ccnum" name="cardnumber" placeholder="1111-2222-3333-4444">
            <label for="expmonth">Exp Month</label>
            <input type="text" id="expmonth" name="expmonth" placeholder="September">
            <div class="row">
              <div class="col-50">
                <label for="expyear">Exp Year</label>
                <input type="text" id="expyear" name="expyear" placeholder="2018">
              </div>
              <div class="col-50">
                <label for="cvv">CVV</label>
                <input type="text" id="cvv" name="cvv" placeholder="352">
              </div>
            </div>
          </div>
          
        </div>
        <label>
          <input type="checkbox" checked="checked" name="sameadr"> Shipping address same as billing
        </label>
        <input type="submit" value="Continue to checkout" class="btn">
      </form>
    </div>
  </div>
  <div class="col-25">
    <div class="container">
      <h4>Cart <span class="price" style="color:black"><i class="fa fa-shopping-cart"></i> <b>4</b></span></h4>
      <p><a href="#">Product 1</a> <span class="price">$15</span></p>
      <p><a href="#">Product 2</a> <span class="price">$5</span></p>
      <p><a href="#">Product 3</a> <span class="price">$8</span></p>
      <p><a href="#">Product 4</a> <span class="price">$2</span></p>
      <hr>
      <p>Total <span class="price" style="color:black"><b>$30</b></span></p>
    </div>
  </div>
</div>
</body>
</html>

6. By kouloughli zaki

Made by kouloughli zaki. Clean Modern Checkout Form. Source

CSS Checkout Form by Kouloughli zaki
<!DOCTYPE html>
<html lang='en' class=''>
<head>
  <meta charset='UTF-8'>
  <title></title>
  		<script src="https://use.fontawesome.com/fbf13eceb7.js"></script>
    	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <style class="INLINE_PEN_STYLESHEET_ID">
*,*:after,*:before{
  box-sizing: border-box;
}

body {
	background-color: #F3F6FF;
}

/* Container start */

.container {
	margin:2% auto;
	width: 80%;
	min-width: 80%;
	min-height: 610px;
	background-color: #F7F7F7;
	border-radius: 10px;
    box-shadow: 0px 0px 19px 6px #ddd;
    overflow: hidden;
}

/* Container Ends */

/* info Start Here */
.info {
	background: transparent;
    z-index: 999;
    position: absolute;
    top: 38px;
    left: 205px;
    float: left;
}

.info i {
	color:rgba(255,255,255,0.7);
	margin-right: 10px;
	font-weight: 900;
	font-size:30px;
	transition:all .4s ease;
	cursor: pointer;
	margin-top: 15px;
}
.info i:hover{
	color:rgba(255,255,255,1);
}

.info .imag img {
	width: 340px;
    transform: rotate(12deg);
    margin-left: 10%;
    padding-bottom: 80px;
}
.info .imag{position: relative;}
.info .imag a:after { 
   	content: '';
    display: block;
    position: absolute;
    left: 16%;
    top: 310px;
    width: 54%;
    max-width: 250px;
    height: 10px;
    background: transparent;
    border-radius: 100px/50px;
    box-shadow: 0 50px 40px rgba(0,0,0,.7);
    }

.price span {
	font-family: roboto;
    font-size: 30px;
    display: block;
    padding: 0px 15px;
    color: #000;
    font-weight: 900;
    color:#fff;
    text-shadow: 0 2px 7px rgba(0, 0, 0, .4);
}
.price span:last-of-type {
	font-size:20px;
	font-weight: 600;
}
/* Info Ends here */

/* Opacity */ 
.colored {
	background-color: #82C5D8;
    width: 600px;
    height: 610px;
    transform: skew(31deg);
    position: relative;
    top: 0;
    left: -200px;
    float: left;
}

/* opacity ends */


/* -----------------------------------------------------------------*/

/* form Start here */
.form h3 {
font-size: 20px;
    font-family: roboto;
    /* font-weight: 700; */
    letter-spacing: 1.3px;
    word-spacing: 3px;
    margin-top: 40px;
 }
label {
    display: block;
    color: #989898;
    font-weight: 700;
    font-family: roboto;
    font-size: 14px;
    letter-spacing: 1px;
    word-spacing: 3px;
    margin-top: 30px;
}
select {
	border: 0;
    background-color: #f7f7f7;
    border-bottom: 2px solid #ddd;
    outline: none;
    padding: 15px 30px;
    width: 230px;
    font-size: 14px;
    padding-bottom: 7px;
    font-weight: 600;
    -webkit-appearance: none;
    margin-top: 5px;
}

.select {
	position: relative;
}
.select:after {
	content: '\f078';
	position: absolute;
    right: 1em;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-family: 'FontAwesome';
    z-index: 10;
    color:#ddd;
}

input {
	border: 0;
    background-color: #f7f7f7;
    border-bottom: 2px solid #ddd;
    outline: none;
    padding: 5px 30px;
    width: 230px;
    font-size: 14px;
    padding-bottom: 7px;
    font-weight: 600;
    transition: all .5s ease-in;
}
input:focus {
	border-bottom:2px solid #82C5D8;
}
.small {
	width:150px;
	padding: 15px 10px;
}
.expiry {
	float:left;
	width:30%;
}
.sec input{
	width: 50px;
    padding: 11px 6px;
    margin-top: 13px;
}

button {
	background-color: #26B961;
    outline: none;
    border: 0;
    color: #fff;
    font-size: 16px;
    font-family: roboto;
    font-weight: 600;
    letter-spacing: 1px;
    word-spacing: 3px;
    padding: 10px;
    width: 34%;
    display: block;
    margin: auto;
    border-radius: 15px;
    cursor: pointer;
}
.form p {
	color:#989898;
	font-family: roboto;
	font-size:14px;
	font-weight:normal;
	text-align: center;
	margin-top: 80px;
	margin-bottom: 4px;
}
/* Form Ends Here */

/* Media Query For Mobile */ 
@media only screen and (max-width: 960px) {
    .colored , .expiry {
       float:none;
    }

    .form {
    	text-align: center;
    }
    .info {
    	left:33%;
    }
    .info .imag img {
    	margin-left:-15%;
    }
    .price span {
    	padding:0px;
    }
    .form p {
    	margin-top: 30px;
    }
    button {
    	margin-bottom: 30px;
    	width:60%;
    }
}
  </style>
</head>
    <body>
    	<div class="container">
    		<div class="colored"></div>
    		<div class="info">
    			<i class="fa fa-long-arrow-left" aria-hidden="true"></i>
    			<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
    			<div class="imag">
    				<a href="#"><img src="https://www.frasescelebre.com/images/speaker.png" /></a>
    			</div>
    			<div class="price">
    			<span>$245.00</span>
    			<span>Nice speaker : Quality</span>
    			</div>
    		</div>
    		<div class="form">
    			<h3>Payment informations</h3>
    			<form action="" method="post">
    				<label>PAYMENT METHOD</label>
    				<span class="select"><select>
    					<option value="VISA">VISA</option>
    					<OPTION value="MASTERCARD">MASTER CARD</OPTION>
    					<OPTION value="AMERICAN EXPRESS">AMERICA EXPRESS</OPTION>
    				</select></span>
    				<label>CARDHOLDER'S NAME</label>
    				<input type="text" name="name">
    				<label>CARD NUMBER</label>
    				<input type="text" name="CCN">
    				<span class="expiry">
	    				<label>EXPIRATION DATE</label>
						<span class="select"><select class="small">
	    					<option value="MARCH">MARCH</option>
	    					<OPTION value="MASTERCARD">APRIL</OPTION>
	    					<OPTION value="AMERICAN EXPRESS">MAY</OPTION>
	    				</select></span>
	    				<span class="select"><select class="small">
	    					<option value="2016">2016</option>
	    					<OPTION value="2017">2017</OPTION>
	    					<OPTION value="2018">2018</OPTION>
	    				</select></span>
	    			</span>
	    			<span class="sec">
	    				<LABEL>SECURITY CODE</LABEL>
	    				<input type="text" name="sec" maxlength="4" />
    				</span>

    				<p>Your credit card information are Encrypted </p>
    				<button>PURCHASE SAFELY</button>
    			</form>
    		</div>
    	</div>
</body>
</html>

7. By Onyeka Aghanenu

Made by Onyeka Aghanenu. Payment form with Hover Effect. Source

CSS Payment Form by Onyeka Aghanenu
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,800,300' rel='stylesheet' type='text/css'> 
<style>
* {
  box-sizing: border-box;
}

body {
  background: yellow url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGklEQVQYV2NkIAAYh7SCa9tl/oM8gNMXMAUAf/wFWQFfPucAAAAASUVORK5CYII=);
  font-size: 100%;
  line-height: 1.4;
  font-family: "Open Sans", Arial;
  margin: 20px;
}
@media all and (max-width: 480px) {
  body {
    font-size: 85%;
  }
}

h1, h2, h3 {
  text-transform: uppercase;
}

p {
  margin-bottom: 25px;
}

.box-title {
  text-shadow: 2px 2px 0 yellow;
  margin-bottom: 5px;
}

.wrapper {
  background: white;
  /* border: 5px solid black; */
  max-width: 500px;
  box-shadow: 10px 10px 0 black;
  margin: 0 auto;
  padding: 1em;
  position: relative;
}
.wrapper:before {
  background: linear-gradient(-135deg, #000 10px, transparent 0), linear-gradient(135deg, #000 10px, transparent 0), linear-gradient(-134deg, yellow 13px, transparent 0), linear-gradient(134deg, yellow 13px, transparent 0);
  background-repeat: repeat;
  background-size: 21px 32px;
  content: "";
  display: block;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 32px;
}
.wrapper:after {
  background: linear-gradient(-45deg, #000 10px, transparent 0), linear-gradient(45deg, #000 10px, transparent 0), linear-gradient(-45deg, yellow 13px, transparent 0), linear-gradient(45deg, yellow 13px, transparent 0);
  background-repeat: repeat;
  background-size: 21px 32px;
  content: "";
  display: block;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 32px;
}

.price-total {
  background: black;
  font-size: 1.5em;
  text-align: center;
  color: yellow;
  font-weight: 800;
  padding: 5px 0;
  margin: 15px 0;
}
.price-total span {
  font-size: 0.75em;
  font-weight: 700;
  color: white;
  line-height: 1.8;
  text-transform: uppercase;
}

.form-el {
  padding: 5px;
  display: block;
}
@media all and (min-width: 480px) {
  .form-el.col-2 {
    width: 50%;
    float: left;
  }
}

form {
  margin: 0 -5px;
}

label {
  display: block;
  font-size: 0.9em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 5px;
}

input {
  border: 3px solid black;
  width: 100%;
  padding: 7px;
  font-weight: 700;
  font-size: 1.1em;
  font-family: "Open Sans", Arial;
  transition: linear all 0.2s;
  text-transform: uppercase;
}
input:focus {
  outline: 0;
  background-color: yellow;
}

button {
  font-size: 1.2em;
  font-family: "Open Sans";
  font-weight: 700;
  padding: 10px;
  margin: 10px 5px 10px 10px;
  text-transform: uppercase;
  background: yellow;
  border: 0;
  line-height: 1.6;
  float: right;
  box-shadow: 3px 3px 0 black;
  cursor: pointer;
  transition: ease-in all 0.3s;
}
@media all and (max-width: 480px) {
  button {
    line-height: 1.8;
  }
}
button #padlock {
  width: 28px;
  height: 28px;
  float: left;
}
button #lock-18-icon {
  transition: ease-in fill 0.3s;
}
button:hover, button:focus {
  background: black;
  color: yellow;
  outline: 0;
  box-shadow: 5px 5px 0 #ddd;
}
button:hover #lock-18-icon, button:focus #lock-18-icon {
  fill: yellow;
}

.cf:after {
  display: table;
  content: "";
  clear: both;
}
</style>
</head>
<body>
  <div class="wrapper">
	<h1 class="box-title">Checkout</h1>
	<!--<p>This the credit card checkout. When pressing pay now, the payment will pass through or something.</p>-->
	<div class="price-total">
		<span>PAY </span>N2,500.00</div>
	<form>
		<div class="form-el">
			<label>Name on Card</label>
			<input name="name" type="text">
		</div>
		<div class="form-el">
			<label>Card Number</label>
			<input name="card-number" type="text">
		</div>
			<div class="form-el col-2">
			<label>CVV</label>
			<input name="name" type="text" maxlength="3">
		</div>
		<div class="form-el col-2">
			<label>Expiry Date</label>
			<input name="card-number" type="text">
		</div>	
		<div class="form-el cf">
			<button><svg id="padlock" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="lock-18-icon" d="M256,193.663c-73.85,0-133.717,59.867-133.717,133.717S182.15,461.097,256,461.097  c73.852,0,133.717-59.867,133.717-133.717S329.852,193.663,256,193.663z M275.381,329.845c-4.387,4.076-6.881,9.795-6.881,15.785  v22.941h-23V345.63c0-5.986-2.496-11.711-6.881-15.785c-5.302-4.93-8.619-11.963-8.619-19.773c0-14.912,12.088-27,27-27  s27,12.088,27,27C284,317.882,280.683,324.915,275.381,329.845z M204.833,171.831c-18.272,6.021-35.095,15.07-50,26.812v-47.074  c0-55.508,45.159-100.666,100.667-100.666s100.667,45.158,100.667,100.666v46.301c-14.896-11.549-31.688-20.461-50-26.363v-19.938  c0-27.938-22.729-50.666-50.667-50.666s-50.667,22.729-50.667,50.666V171.831z"/>
</svg>Pay Now</button>
		</div>
	</form>
</div>
</body>
</html>

8. By Rosa

Made by Rosa. Product Checkout form with product Image. Source

CSS Checkout Form by Rosa
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://use.fontawesome.com/f56e4513c5.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<style>
html, body{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  color: #231F20;
  background-color: #F2F2F1;
}

a{
  text-decoration: none;
}

p, li, a{
  font-size: 14px;
  line-height: 160%;
}

input, select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
}

select::-ms-expand { /* for IE 11 */
    display: none;
}

h1, h2, h3, h4, h5, h6{
  font-weight: 200;
  position: relative;
  margin-bottom: 40px;
}

/* GRID */

.twelve { width: 100%; }
.eleven { width: 91.53%; }
.ten { width: 83.06%; }
.nine { width: 74.6%; }
.eight { width: 66.13%; }
.seven { width: 57.66%; }
.six { width: 49.2%; }
.five { width: 40.73%; }
.four { width: 32.26%; }
.three { width: 23.8%; }
.two { width: 15.33%; }
.one { width: 6.866%; }

/* COLUMNS */

.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}

.col:first-of-type {
  margin-left: 0;
}

.container{
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  position: relative;
}

/* CLEARFIX */

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

/* FORM */

.form-wrapper{
  margin: 50px auto;
  padding: 20px 10px;
  background: linear-gradient(to right, #fff 40.73%, #2c3e50 40.83%);
  position: relative;
  overflow: hidden;
  color: #2c3e50;
}

.form-wrapper h2:after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -12px;
  width: 30px;
  height: 2px;
  background-color: #2c3e50;
}

.five img{
  width: 45%;
  height: auto;
  margin: 50px auto 30px auto;
  display: block;
}

.five .item, .five .price{
  text-align: center;
  margin: 5px auto;
}

form, .title{
  width: 75%;
  margin: 0 auto;
}

form{
  margin-top: 20%;
}

input{
  border: none;
  border-bottom: 1px solid #fff;
  background-color: transparent;
  padding: 10px 0px;
  display: block;
  margin: 15px auto;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #fff;
  font-size: 14px;
  font-family: 'Open Sans', sans-serif;
}

.edate{
  margin-top: 20px;
}

.edate p{
  color: #fff;
  font-size: 12px;
}

select{
  background: transparent;
  border: none;
  font-size: 12px;
  font-family: 'Open Sans', sans-serif;
  padding: 5px;
  width: 30%;
  color: #fff;
  background-color: #2c3e50;
  outline: none;
}

.select-wrapper{
  position: relative;
  display: inline;
  margin-right: 30px;
}

.select-wrapper:before{
  content: 'v';
  font-family: 'Open Sans', sans-serif;
  color: #fff;
  display: inline-block;
  position: absolute;
  right: 0px;
  top: 4px;
  pointer-events: none;
  font-size: 12px;
}

option{
  background: #fff;
  color: #2c3e50;
}

::-webkit-input-placeholder{
  color: #fff;
  font-size: 12px;
}
::-moz-placeholder{
  color: #fff;
  font-size: 12px;
}
:-ms-input-placeholder{
  color: #fff;
  font-size: 12px;
}
:-moz-placeholder{
  color: #fff;
  font-size: 12px;
}

.submit-wrapper{
  text-align: right;
}

input.submit{
  border: 1px solid #fff;
  color: #fff;
  display: inline-block;
  width: auto;
  cursor: pointer;
  padding: 8px 20px;
  margin: 30px 0;
  font-size: 12px;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

input.submit:hover{
  background-color: #fff;
  color: #2c3e50;
}
</style>
</head>
<body>
  <div class="container">
    <div class="form-wrapper cf">
      <div class="five col">
        <div class="title">
          <h2>Checkout</h2>
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/IPhone_7_Jet_Black.svg/200px-IPhone_7_Jet_Black.svg.png" alt="iPhone">
          <p class="item">iPhone</p>
          <p class="price">ยฃ699.99</p>
        </div>
      </div>
      <div class="seven col">
        <form class="form">
          <input type="text" name="name" id="name" placeholder="Name">
          <input type="text" name="card" id="card" placeholder="Card Number">
          <div class="edate">
            <p>Expires:</p>
            <div class="select-wrapper">
              <select>
                <option value="january">January</option>
                <option value="febuary">Febuary</option>
                <option value="march">March</option>
                <option value="april">April</option>
                <option value="may">May</option>
                <option value="june">June</option>
                <option value="july">July</option>
                <option value="august">August</option>
                <option value="september">September</option>
                <option value="october">October</option>
                <option value="november">November</option>
                <option value="december">December</option>
              </select>
            </div>
            <div class="select-wrapper">
              <select>
                <option value="2017">2017</option>
                <option value="2018">2018</option>
                <option value="2019">2019</option>
                <option value="2020">2020</option>
              </select>
            </div>
          </div>
          <div class="submit-wrapper">
            <input class="submit" type="submit" value="Buy Now">
          </div>
        </form>
      </div>
    </div>
  </div>
</body>
</html>

9. By Squibdib

Made by Squibdib. Simplistic Credit Card Checkout Form. Source

CSS Checkout Form by Squibdib
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
      <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet"> 
<style>
body {
  font-family: 'Open Sans';
  margin: 0 auto;
  background: linear-gradient(to right, #2e3542, #4c586c);
}

.cardBox {
  width: 713px;
  height: 384px;
  border-radius: 13px;
  //border: 2px solid #3e3d3f;
  margin: 0 auto;
  margin-top: 50px;
  background-color: #ffffff;
  box-shadow: 0px 0px 4px #181b27;
}

.left {
  width: 236px;
  height: 384px;
  background-color: #0e0e0e;
  border-top-left-radius: 11px;
  border-bottom-left-radius: 11px;
  background-image: radial-gradient(
      circle at top right,
      #008bff,
      #004c8a 80%
    );

}

.form {
  //border: 1px solid #3f3f3f;
  width: 340px;
  height: 359px;
  position: relative;
  bottom: 375px;
  left: 300px;
}

.title {
  color: #26394f;
  font-size: 30px;
  font-weight: bold;
  position: relative;;
  right: 3px;
}

.fieldTitle {
  color: #343434;
  font-weight: 400;
  font-size: 14px;
  margin-top: 20px;
  margin-bottom: 12px;
  letter-spacing: 2.1px;
}

.cvvTitle {
  position: relative;
  left: 90px;
}

.name {
  font-size: 18px;
  font-weight: 300;
  position: relative;
  left: 12px;
  width: 315px;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid #232222;
  opacity: 0.3;
}

.cardNum {
  position: relative;
  font-weight: 300;
  left: 12px;
}


.digits {
  width: 55px;
  font-size: 18px;
  font-weight: 300;
  margin-right: 8px;
  letter-spacing: 3.73px;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid #232222;
  opacity: 0.3;
}

.expDate {
  position: relative;
  left: 12px;
}

.expM {
  font-size: 18px;
  width: 35px;
  font-weight: 300;
  margin-right: 15px;
  letter-spacing: 3.73px;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid #232222;
  opacity: 0.3;
}

.expY {
  font-size: 18px;
  width: 55px;
  font-weight: 300;
  letter-spacing: 2.79px;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid #232222;
  opacity: 0.3;
}

.cvv {
  font-size: 18px;
  width: 45px;
  font-weight: 300;
  margin-left: 102px;
  letter-spacing: 2.9px;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid #232222;
  opacity: 0.3;
}

.add {
  font-size: 22px;
  font-weight: bold;
  position: relative;
  top: 35px;
  left: 103px;
  width: 190px;
  height: 50px;
  cursor: pointer;
  border-radius: 7px;
  //border: 1px solid #3f3f3f;
  text-align: center;
  color: #ffffff;
  background-image: linear-gradient(-90deg, #00b38f 0%, #00cca3 100%);
}

.content {
  position: relative;
  top: 10px;
  bottom: 15px;
}
</style>
</head>
  <body>
  <div class="cardBox">
    <div class="left">

 <svg width="223px" height="400px" viewBox="88 194 203 135" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="ShoppingCart" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(91.000000, 197.000000)">
         <circle id="Oval" stroke="#FFFFFF" stroke-width="4" cx="77" cy="114" r="16"></circle>
         <circle id="Oval-Copy" stroke="#FFFFFF" stroke-width="4" cx="163" cy="114" r="16"></circle>
         <path d="M0.4609375,0.484375 L25.1042483,0.290117471 C32.8412236,0.229128682 40.7839789,6.22465222 42.8424587,13.6727008 L60.1145726,76.167143 C62.1741404,83.6191284 70.1102715,89.6601562 77.8460556,89.6601562 L164.502269,89.6601562 C172.235529,89.6601562 184.777428,89.6601562 184.848676,89.6601562 L178.504574,89.6601562" id="Path-2" stroke="#FFFFFF" stroke-width="5"></path>
         <g id="Total" transform="translate(69.000000, 0.000000)" font-family="HelveticaNeue, Helvetica Neue" fill="#FFFFFF" font-weight="normal">
             <text id="150" font-size="60">
                 <tspan x="0" y="57">150</tspan>
             </text>
             <text id="00" font-size="20">
                 <tspan x="107" y="29">00</tspan>
             </text>
         </g>
     </g>
 </svg>
    </div>

    <form class = "form" action="index.html" method="post">
      <div class="title">
        Enter card info
      </div>
        <div class="fieldTitle">
          Name
      </div>
      <input class="name" type="text" name="name" placeholder="Eddy Exampleson">
      <div class="fieldTitle">
        Card Number
      </div>
      <div class="cardNum">
        <input class = "digits" type="text" name="cardNum1" placeholder="0000">
        <input class = "digits" type="text" name="cardNum2" placeholder="0000">
        <input class = "digits" type="text" name="cardNum3" placeholder="0000">
        <input class = "digits" type="text" name="cardNum4" placeholder="0000">
      </div>
      <div class="fieldTitle">
        Expiration Date <span class = "fieldTitle cvvTitle">CVV</span>
      </div>
      <div class="expDate">
        <input type="text" name="expM" class = "expM" placeholder="MM">
        <input type="text" name="expY" class = "expY" placeholder="YYYY">
        <input type="text" name="cvv" class = "cvv" placeholder="###"><br>
        </div>
        <div class="add"><div class="content">
          Add Card</div>
        </div>
    </form>
  </div>
</body>
</html>

10. By Kai Cheng

Made by Kai Cheng. Checkout form with Order Details. Source

CSS Checkout Form by Kai Cheng
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css'>
<style>
/* Design reference: https://codepen.io/mycnlz/pen/reLOZV */

/* basic */
*,
*:before,
*:after {
	box-sizing: border-box;
}
html,
body {
	height: 100%;
}
body {
	font: 16px/1.2 "Roboto", sans-serif;
	color: #333;
}

/* ui_btn */
.ui_btn {
	display: inline-block;
	width: 100%;
	text-align: center;
	border-radius: 3px;
	background-color: white;
	cursor: pointer;
}
.b_lg {
	padding: 8px;
	font-size: 14px;
}
.b_primary {
	border: 1px solid #333;
}

/* formfield */
input {
	width: 100%;
	padding: 10px 12px;
	font-size: 14px;
	border: 1px solid #ccc;
	border-radius: 5px;
	background-color: snow;
}

/* custom scrollbar */
/* width */
::-webkit-scrollbar {
	width: 3px;
}
/* Track */
::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: #555;
}

/* container */
.container {
	display: flex;
	width: 600px;
	height: 450px;
	border-radius: 10px;
	background-color: snow;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	overflow: hidden;
}

/* box */
.box {
	padding: 24px;
}
.box .head {
	margin-bottom: 16px;
	color: orangered;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
}

/* order_box */
.order_box {
	width: 260px;
}

/* order_list */
.order_list {
	height: 307px;
	overflow: auto;
}
.order_list li {
	display: flex;
	padding: 8px 0;
}
.order_list li + li {
	border-top: 1px solid #ccc;
}
.order_list .prod_img {
	font-size: 0;
}
.order_list .prod_info {
	padding: 0 8px;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
.order_list .prod_info .name {
	flex-grow: 1;
}
.order_list .prod_info .price {
	color: crimson;
	font-size: 14px;
	font-weight: bold;
}

/* total_price */
.total_price dd {
	text-align: right;
	color: crimson;
	font-size: 32px;
	font-weight: bold;
}

/* payment_box */
.payment_box {
	width: 340px;
	box-shadow: -1px 0 5px 1px #ccc;
	background: linear-gradient(
		0deg,
		rgba(230, 100, 101, 0.5),
		rgba(145, 152, 229, 0.5)
	);
	position: relative;
}
.payment_box .card_img {
	height: 180px;
	padding: 16px;
	margin-bottom: 16px;
	position: relative;
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
	background-color: crimson;
	overflow: hidden;
}
.payment_box .card_img:before,
.payment_box .card_img:after {
	content: "";
	display: block;
	width: 250px;
	height: 250px;
	border-radius: 50%;
	background-color: rgba(20, 0, 0, 0.1);
	position: absolute;
	z-index: 1;
}
.payment_box .card_img:before {
	top: 40%;
	right: -40%;
}
.payment_box .card_img:after {
	top: -40%;
	left: -40%;
}
.payment_box .card_img .fa-cc-visa {
	color: white;
	font-size: 32px;
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
}
.payment_box .card_info {
	margin-top: 40px;
	color: white;
	text-shadow: 1px 1px 2px black;
	position: relative;
	z-index: 2;
}
.payment_box .card_info dt {
	margin-bottom: 4px;
	color: lightgray;
	font-size: 12px;
	text-transform: uppercase;
}
.payment_box .card_info li {
	display: inline-block;
}
.payment_box .card_info li + li {
	margin-left: 4px;
}
.payment_box .number {
	margin-bottom: 12px;
}
.payment_box .expiration,
.payment_box .cvc {
	display: inline-block;
	width: calc(50% - 2px);
}
.payment_box .card_form {
	flex-grow: 1;
}
.payment_box .card_form .footer {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 24px;
}
</style>
</head>
<body>
	<div class="container">
		<div class="box order_box">
			<div class="head">Order Details</div>
			<div class="body">
				<ul class="order_list">
					<li>
						<figure class="prod_img">
							<img src="https://fakeimg.pl/60x60/" />
						</figure>
						<div class="prod_info">
							<div class="name">Jordan Eclipse</div>
							<div class="price">$110</div>
						</div>
					</li>
					<li>
						<figure class="prod_img">
							<img src="https://fakeimg.pl/60x60/" />
						</figure>
						<div class="prod_info">
							<div class="name">Jordan Eclipse</div>
							<div class="price">$110</div>
						</div>
					</li>
					<li>
						<figure class="prod_img">
							<img src="https://fakeimg.pl/60x60/" />
						</figure>
						<div class="prod_info">
							<div class="name">Jordan Eclipse</div>
							<div class="price">$110</div>
						</div>
					</li>
					<li>
						<figure class="prod_img">
							<img src="https://fakeimg.pl/60x60/" />
						</figure>
						<div class="prod_info">
							<div class="name">Jordan Eclipse</div>
							<div class="price">$110</div>
						</div>
					</li>
					<li>
						<figure class="prod_img">
							<img src="https://fakeimg.pl/60x60/" />
						</figure>
						<div class="prod_info">
							<div class="name">Jordan Eclipse</div>
							<div class="price">$110</div>
						</div>
					</li>
				</ul>
			</div>
			<div class="foot">
				<dl class="total_price">
					<dt>Total</dt>
					<dd>$550</dd>
				</dl>
			</div>
		</div>
		<div class="box payment_box">
			<div class="head">Payment Information</div>
			<div class="body">
				<div class="card">
					<div class="card_img">
						<i class="fab fa-cc-visa"></i>
						<div class="card_info">
							<dl class="number">
								<dt>card number</dt>
								<dd>
									<ul>
										<li>0000</li>
										<li>0000</li>
										<li>0000</li>
										<li>0000</li>
									</ul>
								</dd>
							</dl>
							<dl class="expiration">
								<dt>expiration</dt>
								<dd>00 / 0000</dd>
							</dl>
							<dl class="cvc">
								<dt>cvc</dt>
								<dd>000</dd>
							</dl>
						</div>
					</div>
					<div class="card_form">
						<div class="content">
							<ul class="card_box">
								<li class="number"><input type="text" placeholder="1234 5678 1234 5678" /></li>
								<li class="expiration"><input type="text" placeholder="MM/YYYY" /></li>
								<li class="cvc"><input type="text" placeholder="123" /></li>
							</ul>
						</div>
						<div class="footer">
							<ul class="bar_tool">
								<li><span class="ui_btn b_lg b_primary">Checkout</span></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="foot">

			</div>
		</div>
	</div>
</body>
</html>

11. By Daniel Toillion

Made by Daniel Toillion. Simple Checkout. Source

CSS Checkout Form by Daniel Toillion
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
body {
  background: #1C1D21;
}

h1 {
  color: #EEEFF7;
  text-align: center;
}

form {
  width: 350px;
  margin: 0 auto;
}
form .half input {
  width: 165px;
  float: left;
}
form .half input:first-child {
  margin-right: 20px;
}
form input, form button {
  box-sizing: border-box;
  display: block;
  float: left;
  width: 100%;
  padding: 20px;
  font-size: 1.3em;
  margin-bottom: 20px;
  outline: none;
  border: none;
}
form input {
  color: #1C1D21;
}
form button {
  color: #1C1D21;
  background: #EEEFF7;
  font-weight: bold;
}
</style>
</head>
<body>
  <div class="checkout">
  <h1>
    Checkout
  </h1>
  <form>
    <input placeholder="Card number" type="text" /><input placeholder="Name on card" type="text" />
    <div class="half">
      <input placeholder="MM/YY" type="text" /><input placeholder="CVC" type="text" />
    </div>
    <button type="submit">Pay Now</button>
  </form>
</div>
</body>
</html>