Digicode – CSS Challenge

keypadIn this challenge you are going to use CSS to create your own digicode keypad.

Learning Objectives


By completing this challenge you will familiarise yourself with CSS pseudo-classes.
A pseudo-class is used to define a special state of an element.
For example, it can be used to:

  • Style an element when a user rolls over it.
  • Style visited and unvisited hyperlinks differently.
  • Style active elements (for instance when a user clicks on an element, it becomes active).

The syntax of pseudo-classes:

selector:pseudo-class {
    property:value;
}

For instance to create a roll-over effect for hyperlinks:

A:hover {
    color:#FF0000;
}

You can also have a pseudo-class for when a link or button is active (being clicked on):

A:active {
    font-weight:bold;
}

Find out more about pseudo-classes.

Let’s see the code in practice by completing this challenge.

Your Task


Tweak the code below to create your own look & feel for your “digicode”:

See the Pen LENvrN by 101 Computing (@101Computing) on CodePen.

Did you like this challenge?

Click on a star to rate it!

Average rating 4.7 / 5. Vote count: 3

No votes so far! Be the first to rate this post.

As you found this challenge interesting...

Follow us on social media!