Colored Numbered Circles Using Pure CSS & HTML

Here’s some very basic numbers you can use which are very easy to install.

To increase the size, you can wrap the HTML using the WordPress Heading tags or simply add a font-size to each CSS rule.

See the Pen oKrFg by Brad Dalton (@braddalton) on CodePen.

Installation

1. Simply copy all the CSS code and paste it at the end of your child themes style.css file
2. Wrap your numbers using the span tags in your text editor

<h1><span class="blue">3</span></h1>

You could also generate CSS for a box shadow effect and add it to each CSS rule.

-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    7px 7px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow:         7px 7px 5px 0px rgba(50, 50, 50, 0.75);