Credit Card Payment Form Neo Brutalism Design Using HTML and CSS

on
Credit Card Payment Form Neo Brutalism Design Using HTML and CSS
display monitor turning on

Photo by Pankaj Patel on Unsplash

Credit Card Payment Form Neo Brutalism Design Using HTML and CSS

Create a modern, responsive credit card payment form design in the neo-brutalist style using HTML and CSS, featuring bold colors, thick borders, and heavy shadows for a raw, unpolished aesthetic. This implementation focuses on striking visuals, accessible design, and maintainable code, ideal for processing payments in web interfaces.

Payment Details

Secure payment? Learn More

Checkout

Need help? Support

Prerequisites

  • Basic HTML and CSS knowledge
  • A code editor (e.g., VS Code)

Part 1: Credit Card Payment Form Neo Brutalism Design

Step 1: HTML Structure (index.html)

Create a semantic HTML structure for the neo-brutalist credit card payment form with a container, header, form with text inputs for card details, and a submit button.

<div class="neo-payment-container" role="region" aria-label="Neo-brutalist payment forms">
  <div class="neo-payment-wrapper" id="payment-form-primary">
    <div class="neo-payment-header">
      <h2>Payment Details</h2>
    </div>
    <form class="neo-payment-form" action="/payment" method="post">
      <div class="neo-payment-form-group">
        <label for="card-number-primary" class="neo-payment-form-label">Card Number</label>
        <input type="text" id="card-number-primary" name="card-number" class="neo-payment-form-input" placeholder="1234 5678 9012 3456" required aria-label="Credit card number" />
      </div>
      <div class="neo-payment-form-cvc-row">
        <div class="neo-payment-form-group">
          <label for="card-expiry-primary" class="neo-payment-form-label">Expiry Date</label>
          <input type="text" id="card-expiry-primary" name="card-expiry" class="neo-payment-form-input" placeholder="MM/YY" required aria-label="Card expiry date" />
        </div>
        <div class="neo-payment-form-cvc-group neo-payment-form-group">
          <label for="card-cvc-primary" class="neo-payment-form-label">CVC</label>
          <input type="text" id="card-cvc-primary" name="card-cvc" class="neo-payment-form-input" placeholder="123" required aria-label="Card CVC code" />
        </div>
      </div>
      <div class="neo-payment-form-group">
        <label for="card-holder-primary" class="neo-payment-form-label">Cardholder Name</label>
        <input type="text" id="card-holder-primary" name="card-holder" class="neo-payment-form-input" placeholder="John Doe" required aria-label="Cardholder name" />
      </div>
      <button type="submit" class="neo-payment-form-button">Pay Now</button>
    </form>
    <div class="neo-payment-footer"> Secure payment? <a href="#" aria-label="View payment security details">Learn More</a>
    </div>
  </div>
  <div class="neo-payment-wrapper secondary" id="payment-form-secondary">
    <div class="neo-payment-header">
      <h2>Checkout</h2>
    </div>
    <form class="neo-payment-form" action="/payment" method="post">
      <div class="neo-payment-form-group">
        <label for="card-number-secondary" class="neo-payment-form-label">Card Number</label>
        <input type="text" id="card-number-secondary" name="card-number" class="neo-payment-form-input" placeholder="1234 5678 9012 3456" required aria-label="Credit card number" />
      </div>
      <div class="neo-payment-form-row">
        <div class="neo-payment-form-group">
          <label for="card-expiry-secondary" class="neo-payment-form-label">Expiry Date</label>
          <input type="text" id="card-expiry-secondary" name="card-expiry" class="neo-payment-form-input" placeholder="MM/YY" required aria-label="Card expiry date" />
        </div>
        <div class="neo-payment-form-cvc-group neo-payment-form-group">
          <label for="card-cvc-secondary" class="neo-payment-form-label">CVC</label>
          <input type="text" id="card-cvc-secondary" name="card-cvc" class="neo-payment-form-input" placeholder="123" required aria-label="Card CVC code" />
        </div>
      </div>
      <div class="neo-payment-form-group">
        <label for="card-holder-secondary" class="neo-payment-form-label">Cardholder Name</label>
        <input type="text" id="card-holder-secondary" name="card-holder" class="neo-payment-form-input" placeholder="Jane Smith" required aria-label="Cardholder name" />
      </div>
      <button type="submit" class="neo-payment-form-button neo-payment-checkout-form-button">Pay Now</button>
    </form>
    <div class="neo-payment-footer"> Need help? <a href="#" aria-label="View payment support options">Support</a>
    </div>
  </div>
</div>

Step 2: Core CSS Implementation (styles.css)

Style the credit card payment form and its elements with neo-brutalist aesthetics: bold colors, thick borders, heavy shadows, and a monospace font. Include Google Fonts for consistent typography.

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=IBM+Plex+Mono:wght@400;700&display=swap" rel="stylesheet">
:root {
    --gray-900: #111827;
    --gray-700: #374151;
    --gray-300: #d1d5db;
    --gray-100: #f3f4f6;
    --white: #ffffff;
    --primary-600: #2563eb;
    --primary-500: #3b82f6;
    --accent-500: #f59e0b;
    --success-500: #10b981;
    --error-500: #ef4444;
    --pink-500: #ec4899;
    --cyan-500: #06b6d4;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 12px;
    --transition: 0.2s ease;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-neo: 4px 4px 0 var(--gray-900);
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
}

.neo-payment-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  width: 100%;
  max-width: 400px;
}

.neo-payment-wrapper {
  width: 360px;
  padding: var(--spacing-lg);
  background: var(--white);
  border: 4px solid var(--gray-900);
  box-shadow: var(--shadow-neo);
  border-radius: var(--radius-lg);
}

.neo-payment-wrapper.secondary {
  border-color: var(--accent-500);
}

.neo-payment-header {
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.neo-payment-header h2 {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  margin: 0;
  color: var(--gray-900);
}

.neo-payment-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.neo-payment-form-group {
  display: flex;
  flex-direction: column;
}
.neo-payment-form-cvc-row {
  display: flex;
  gap: var(--spacing-md);
}

.neo-payment-form-cvc-group input {
  width: 100%;
}

.neo-payment-form-label {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--spacing-xs);
}

.neo-payment-form-input {
  padding: var(--spacing-sm);
  border: 3px solid var(--gray-900);
  background: var(--gray-100);
  font-size: 0.875rem;
  font-family: var(--font-mono);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
}

.neo-payment-wrapper.secondary .neo-payment-form-input {
  border-color: var(--accent-500);
}

.neo-payment-form-input:focus {
  outline: none;
  background: var(--gray-300);
  border-color: var(--primary-600);
  box-shadow: 2px 2px 0 var(--accent-500);
}

.neo-payment-form-row {
  display: flex;
  gap: var(--spacing-sm);
}

.neo-payment-form-row .neo-payment-form-group {
  flex: 1;
}

.neo-payment-form-button {
  padding: var(--spacing-sm) var(--spacing-lg);
  background: var(--success-500);
  color: var(--white);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.875rem;
  border: 3px solid var(--gray-900);
  cursor: pointer;
  box-shadow: var(--shadow-neo);
  transition: all var(--transition);
  border-radius: var(--radius-sm);
}

.neo-payment-wrapper.secondary .neo-payment-form-button {
  background: var(--pink-500);
  border-color: var(--accent-500);
}

.neo-payment-form-button:hover,
.neo-payment-form-button:focus {
  background: var(--white);
  color: var(--success-500);
  border-color: var(--success-500);
  box-shadow: none;
  transform: translate(2px, 2px);
}

.neo-payment-checkout-form-button:hover {
  color: var(--pink-500) !important;
  background: var(--white) !important;
  border-color: var(--pink-500) !important;
}

.neo-payment-wrapper.secondary .neo-payment-form-button:hover,
.neo-payment-wrapper.secondary .neo-payment-form-button:focus {
  color: var(--pink-500);
  border-color: var(--pink-500);
}

.neo-payment-form-button:focus {
  outline: none;
  box-shadow: 2px 2px 0 var(--accent-500), 0 0 0 3px var(--primary-600);
}

.neo-payment-footer {
  margin-top: var(--spacing-md);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--gray-700);
}

.neo-payment-footer a {
  color: var(--primary-600);
  text-decoration: underline;
}

.neo-payment-footer a:hover,
.neo-payment-footer a:focus {
  color: var(--primary-500);
}

.neo-payment-footer a:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-500);
}

@media (max-width: 640px) {
  .neo-payment-container {
    gap: var(--spacing-sm);
  }

  .neo-payment-wrapper {
    width: 100%;
    max-width: 320px;
    padding: var(--spacing-md);
  }

  .neo-payment-header h2 {
    font-size: 1.25rem;
  }

  .neo-payment-form-label,
  .neo-payment-form-input,
  .neo-payment-form-button {
    font-size: 0.75rem;
  }

  .neo-payment-form-row {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .neo-payment-footer {
    font-size: 0.6875rem;
  }
}

Explanation

  • Layout: The payment form uses a flexbox container (neo-payment-container) to stack payment wrappers (neo-payment-wrapper) vertically. Each wrapper includes a header (neo-payment-header), form (neo-payment-form) with text inputs for card number, expiry date, CVC, and cardholder name, and a submit button (neo-payment-form-button). A footer (neo-payment-footer) with a link is included, styled with a white background, thick borders, and heavy shadows.
  • Styling: The wrapper uses a white background with thick black (4px) or orange (--accent-500 for secondary) borders and a 4px shadow (--shadow-neo). Inputs have 3px borders with a gray background (--gray-100). The button uses green (--success-500) or pink (--pink-500). Text uses a monospace font (IBM Plex Mono). Hover/focus states invert button colors and remove shadows, while inputs gain a blue border on focus.
  • Interactivity: The submit button (neo-payment-form-button) and footer link (neo-payment-footer a) have hover and focus states that adjust colors and shadows. Inputs change background on focus. No JavaScript is needed for this static design.
  • Visual Feedback: Hovering or focusing the button inverts colors (e.g., green to white, white to green) with a transform (translate(2px, 2px)) and no shadow. Inputs gray out (--gray-300) and gain a blue border (--primary-600) with an orange shadow on focus. Focus states add a dual shadow (orange and blue) for accessibility.
  • Responsiveness: A media query (@media (max-width: 640px)) adjusts wrapper width to 100% (max 320px), reduces padding and font sizes, and stacks the expiry date and CVC inputs vertically, maintaining the neo-brutalist aesthetic for mobile usability.
  • Accessibility: role="region" and aria-label on the container provide context for screen readers. Inputs have aria-label (e.g., Credit card number, Cardholder name), and the footer link has aria-label. The form uses required for validation. High contrast ratios (4.5:1 minimum, verified for #10b981, #ec4899, #111827, #ffffff) and bold typography ensure readability. Buttons and inputs are keyboard-focusable with clear focus styles (dual shadow with --accent-500 and --primary-600).
UX Tip: Neo-brutalist payment forms should feel bold and tactile with heavy shadows, stark contrasts, and clear input fields. Ensure accessibility with ARIA attributes, descriptive labels, and keyboard support. In production, integrate with a payment gateway, add input validation (e.g., card number format), and test across devices.

Accessibility Features

  • Use role="region" and aria-label for semantic structure
  • Include aria-label on inputs and links for screen readers
  • Ensure high contrast ratios for text, borders, and backgrounds (4.5:1 minimum)
  • Support keyboard navigation with clear focus styles
  • Use bold, readable typography (monospace for neo-brutalism)

Golden Rules

  • Use CSS variables for consistent theming
  • Implement bold borders and heavy shadows for neo-brutalist style
  • Ensure accessibility with ARIA and descriptive attributes
  • Optimize for mobile with responsive design

Conclusion

A professional neo-brutalist credit card payment form should embrace raw, bold aesthetics, provide clear user feedback, remain responsive, and follow accessibility guidelines. This solution uses HTML and CSS for striking payment forms with primary and secondary variants, featuring heavy shadows, thick borders, a monospace font, and vibrant colors. Experiment with colors, shadow offsets, or add features like real-time validation or card type detection. Test across devices and browsers for usability. Feel free to leave comments with any questions or suggestions!

Location: Pune, Maharashtra, India

Comments

Post a Comment