Make Your Own HTML Johnson Box

html-johnson-boxHow to make your own HTML Johnson Boxes to add interesting effects to your web page or email template and encourage the reader to keep reading your message.

A Johnson Box is a HTML container with some styles such as color and borders added to it. The main obvious feature is a colored background which attracts the eye of the reader and encourages them to keep reading.

Johnson Boxes are reported to improve response rates in direct mail marketing and have been adopted for Online use by Internet marketers. Your own split testing will reveal what colors and border styles improve sales conversions the most.

Johnson Boxes can also be used for general blogging and article writing simply because they make a web page look more interesting. The Johnson box captures the eye of the reader and encourages them to keep scrolling and keep reading.

This page shows how to make Johnson Boxes using just HTML and CSS.

There are two types of Johnson Box I can demonstrate

  • Johnson Box without a headline
  • Johnson Box with a headline

This post will show how to make HTML Johnson Boxes without a headline. The Johnson Box with a headline will be covered in a future article.

9 HTML Johnson Box Examples

So now, here is 9 Johnson Box examples you can play with. Experiment with different colors, border styles and border thickness until you get the right look and feel for your website.

Example 1

Example 1: No borders.

HTML

<p class="my_class_name">
	Example 1: No borders.
</p>

CSS

.my_class_name {
	padding: 20px;
	background: #ffff99;
	width: 90%;
	margin: 20px auto;
}

Example 2

Example 2: No borders, shadow

HTML

<p class="my_class_name">
	Example 2: No borders, shadow.
</p>

CSS

.my_class_name {
	padding: 20px;
	background: #ffff99;
	width: 90%;
	margin: 20px auto;
	box-shadow: 0 8px 8px -6px #333;
}

Example 3

Example 3: 4 solid borders.

HTML

<p class="my_class_name">
	Example 3: 4 solid borders.
</p>

CSS

.my_class_name {
	padding: 20px;
	background: #ffff99;
	width: 90%;
	margin: 20px auto;
	border: 1px solid #333;
}

Example 4

Example 4: 4 solid borders, shadow.

HTML

<p class="my_class_name">
	Example 4: 4 solid borders, shadow.
</p>

CSS

.my_class_name {
	padding: 20px;
	background: #ffff99;
	width: 90%;
	margin: 20px auto;
	border: 1px solid #333;
	box-shadow: 0 9px 9px -5px #666;
}

Example 5

Example 5: 4 solid borders, rounded corners.

HTML

<p class="my_class_name">
	Example 5: 4 solid borders, rounded corners.
</p>

CSS

.my_class_name {
	padding: 20px;
	background: #ffff99;
	width: 90%;
	margin: 20px auto;
	border: 1px solid #e5e589;
	border-radius: 9px;
}

Example 6

Example 6: 4 dashed borders.

HTML

<p class="my_class_name">
	Example 6: 4 dashed borders.
</p>

CSS

.my_class_name {
	padding: 20px;
	background: #ffff99;
	width: 90%;
	margin: 20px auto;
	border: 3px dashed #ee0000;
}

Example 7

Example 7: 2 solid borders.

HTML

<p class="my_class_name">
	Example 7: 2 solid borders.
</p>

CSS

.my_class_name {
	padding: 20px;
	background: #ffff99;
	width: 90%;
	margin: 20px auto;
	border-top: 4px solid #ffcc99;
	border-bottom: 4px solid #ffcc99;
}

Example 8

Example 8: 1 solid border.

HTML

<p class="my_class_name">
	Example 8: 1 solid border.
</p>

CSS

.my_class_name {
	padding: 20px;
	background: #ccffcc;
	width: 90%;
	margin: 20px auto;
	border-left: 5px solid #ff8080;
}

Example 9

Example 9: 4 double borders.

HTML

<p class="my_class_name">
	Example 9: 4 double borders.
</p>

CSS

.my_class_name {
	padding: 20px;
	background: #b7cfe5;
	width: 90%;
	margin: 20px auto;
	border: 4px double #b7cfe5;
}

Sources

Special thanks to the following websites for providing reference.

Related

The correct way to edit HTML and CSS with software you probably already have on your computer.

How to create modern CSS video borders without any graphics.

How to create beautiful HTML/CSS hyperlink buttons for FREE by clicking and sliding a few buttons.

My top 10 list for CSS study and reference.

{ 3 comments… add one }
  • Bahawalpur January 22, 2016, 8:54 pm

    Your Html/Css examples are simple and elegant. How to make them work in my WordPress theme?

    • Ed Zivkovic January 23, 2016, 10:37 am

      Put the CSS in your WordPress stylesheet (style.css). Put the HTML in your post or page.

Leave a Comment