WP SITES

2948 Tutorials & 189 Plugins
Quote

Colored Numbered Circles Using Pure CSS & HTML

—

by

Brad Dalton

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.

colored number circle

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);

with box shadow

4 responses to “Colored Numbered Circles Using Pure CSS & HTML”

  1. James Avatar
    James

    Hello Brad,

    I’m want to use these circles in the four home page special widgets areas in the minimum pro theme. Couple of questions…. How would you add a hover effect (color change) to the circles? Are the circle responsive?

    Thanks

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

      You could use something like this:
      [code]
      {
      -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=10)”;
      filter: alpha(opacity=10);
      -moz-opacity: 0.1;
      -khtml-opacity: 0.1;
      opacity: 0.1;
      }
      [/code]

      The CSS for Media Queries depends on a lot of different variables.

      Reply
  2. Keith Davis Avatar
    Keith Davis

    Nice one Brad
    Might give this one a try.

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

      Good for step by step tutorials amongst other things Keith.

      Softens it up a bit as well.

      Reply

Was This Tutorial Helpful?