Grayscale to Colour Credit Card Payment Form With Flip Animation for CVV

Worried about licensing?

Do you have right license for your templates and fonts?

Head over to our partner Envato Elements and unlock unlimited downloads of over 50 million digital assets with full commercial licensing.

  • 50+ Million Assets with Unlimited Downloads
  • Templates, Addons, Fonts, Footage, Photos, Brushes, Presets & More
  • Full Commercial licensing for client work

Get ultimate peace of mind!

Get Started Now
credit card form input field minimalist SVG UX
Image: Grayscale to Colour Credit Card Payment Form With Flip Animation for CVV GIF

Here is a minimal but functional CC form that you can test it with dummy credit card numbers to see how it automatically detects the card type. As you fill in the card number it detects the type of card and adds the necessary colour to the greyscale card. When you try and enter the CVV the card flips over, very cool.

If you are having trouble with the pen, try the archived copy on GitHub

CC Form With Flip Animation Snippet

See the Pen Credit Card Payment Form by Adam Quinlan (@quinlo) on CodePen.default

Posted by:Saijo George

Digital Marketer with a strong focus on technical SEO and design. One of the top 100 makers on Producthunt, co-organizer of the SEO Meetup in Melbourne, an instructor at General Assembly. Worked with brands like Envato, AEON. Currently the SEO Strategy Director at Supple.