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.

Download Now: Free Intro Guide to HTML & CSS

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.

W3Schools coupon demo with HTML and CSS

To start, you’d use the following snippet in HTML.

 

 

   <div class="coupon">

  <div class="container">

    <h3>Company Logo</h3>

  </div>

  <img src="hamburger.jpg" alt="Avatar" style="width:100%;">

  <div class="container" style="background-color:white">

    <h2><b>20% OFF YOUR PURCHASE</b></h2>

    <p>Lorem ipsum..</p>

  </div>

  <div class="container">

    <p>Use Promo Code: <span class="promo">BOH232</span></p>

    <p class="expire">Expires: Jan 03, 2021</p>

  </div>

</div>

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.

 

 

   .coupon {

  border: 5px dotted #bbb; /* Dotted border */

  width: 80%;

  border-radius: 15px; /* Rounded border */

  margin: 0 auto; /* Center the coupon */

  max-width: 600px;

}

 

.container {

  padding: 2px 16px;

  background-color: #f1f1f1;

}

 

.promo {

  background: #ccc;

  padding: 3px;

}

 

.expire {

  color: red;

}

 

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:

Silly example of coupon using HTML and CSS

Here was the code snippet I used.

 

 

   <!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

body {

  font-family: Georgia;

}

 

.coupon {

  border: 5px solid #bbb;

  width: 80%;

  border-radius: 10px;

  margin: 0 auto; 

  max-width: 600px;

}

h3 {

  display: block;

  font-size: 2em;

}

.container {

  padding: 2px 16px;

  background-color: #f1f1f1;

}

 

.promo {

  background: #ccc;

  padding: 3px;

}

 

.expire {

  color: green;

}

</style>

</head>

<body>

 

<div class="coupon">

  <div class="container">

    <h3>Anna's Fake but Fabulous Company</h3>

  </div>

  <img src="/w3images/nature.jpg" alt="Avatar" style="width:100%;">

  <div class="container" style="background-color:yellow">

    <h2><b>50% OFF YOUR PURCHASE</b></h2> 

    <p>First-time customers get half off their entire purchase. Happy spending!</p>

  </div>

  <div class="container">

    <p>Use Promo Code: <span class="promo">ANNAROCKS12</span></p>

    <p class="expire">Expires: Never</p>

  </div>

</div>

 

</body>

</html> 

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!

New Call-to-action

 css introduction

Originally published May 11, 2020 7:00:00 AM, updated May 11 2020

Topics:

Bootstrap & CSS