In 2016, 8 million users redeemed online coupons in the US. By 2021, that number is expected to increase to 145 million.
If you’re running an online store or website, then you want to make coupons part of your marketing strategy. Coupons that offer free shipping or a percent discount off their total purchase, for example, can help attract new buyers and delight loyal customers.
If you’re using a website builder, then there might be a built-in feature you can use. GoDaddy, for example, offers a module for creating coupons. However, using this type of module will limit your customization options.
Plus some website building tools might not even have this feature. Bootstrap CSS, for example, is a front-end development kit that comes bundled with templates for typography, forms, buttons, drop-down menus, navigation, and other interface components — but not for coupons.
In that case, you’ll need to create a coupon from scratch using some basic HTML and CSS. We’ll walk through the process below.
How to Create Coupons in CSS
You can create coupons using HTML and CSS. For this demo, we’ll use an example from W3Schools.
Let’s say you want to recreate the coupon below.
To start, you’d use the following snippet in HTML.
To customize this coupon, you’d just need to replace the placeholder text after the <h3>, <h2>, and <p> tags with your company name, coupon copy and code, and expiration date.
Next up is the coupon’s formatting. You want to make the border dotted, instead of a solid line, and round out its edges to look like a cut-out coupon you’d find in a print magazine. You also want to make parts of the background gray so the coupon copy stands out. Finally, you want to change the font of the expiration date to red to catch the reader’s eye.
To create this styling, you’d add the following CSS in the <head> section of your HTML.
You can play around with this example on W3School’s test site. I did, changing the font to Georgia, enlarging the H3, making the border a solid line, replacing the picture, changing the background of the coupon copy to yellow, and changing the color of the expiration date to green. The final result looked like this:
Coding Coupons from Scratch
Now you can get started building coupons from scratch with HTML and CSS. You can play around with the number of sections you include as well as the colors, fonts, and other formatting you choose. Happy coding!
![How to Create Scrolling Text With CSS [+ Code Examples]](https://www.hubspot.com/hubfs/Google%20Drive%20Integration/scrolling%20text%20css.jpeg)
![How to Center an Image with HTML and CSS [+ Code Modules]](https://www.hubspot.com/hubfs/center-an-image-in-html.jpg)
