How To Design Keyboard Keys In CSS

Today I was working on my CSS editor and wanted to display a quick pop-up note on the screen every time a short-cut key is pressed. I could simply use an image of a key, but why not design one in CSS? I’ll avoid extra HTTP request just to load the image… and you probably don’t want to create images for anything you can do in CSS (& don’t have to in SVG, so to speak.)

Here’s a list of my best web development tutorials.

Complete CSS flex tutorial on Hashnode.

Ultimate CSS grid tutorial on Hashnode.

Higher-order functions .map, .filter & .reduce on Hashnode.

Follow me @ Twitter, Instagram & fb to never miss premium articles.

My Coding Books

Here is what I am aiming at. A simple pop-up message displayed when W key is pressed (In my case, it activates the “Draw Within” feature in CSS editor I’m currently working on:)