How to Display Keyboard Keys in Posts

Learn a simple CSS trick to display stylish Windows Keyboard Keys (Black or White) into WordPress post blog post instead of showing default texts or symbols.

One of my visitor asked me that whether he can display Keyboard Keys into posts. Yes, you can do this with CSS code which helps you to control the style and layout of multiple web page all at once.

Many website owners also wants to add keyboard keys into their web pages dynamically to attract visitor’s attention instead of showing images, photos or simple text format. If you use any image to show Keyboard Keys then it will badly impact on your blog posts loading time.

Thus, you can give original keyboard key effect to any Text or symbol using SWT CSS3 tricks. Therefore, just follow these procedures and make your Posts more dynamic and jaunty. Display keyboard keys in your posts.

How to Display Keyboard Key button within Posts

There is very simple step to display keyboard key in your posts. Just paste CSS codes into your site and display keyboard key anywhere you want to display that.

Step-1:

First of all you need to insert these CSS codes into your website or blog. Display keyboard keys. If you have created css file then just copy the code and paste it into the css file. Many WordPress theme allow users to paste custom CSS codes.

However, if you have a blogger blog then go to your blog dashboard → Theme → Edit HTML and search for ]]></b:skin> and just before/above ]]></b:skin> paste one or both of the following codes.

A) For Black Keyboard Keys

Use these css codes to display keyboard key in black color.

swt-black-kbk {/* Black Keyboard Key Style by www.superwebtricks.com */
color:#fff;
margin:0 5px;
padding:1px 5px;
font-size:1.2em;
font-family:courier new;
border:1px #fff;
-webkit-border-radius: 3px;
   -moz-border-radius: 3px;
        border-radius: 3px;
background:-webkit-gradient(
  linear,
  left top,
  right top,
  color-stop(0%, #000),
  color-stop(25%, #111)
/* Black Keyboard Key Style by Showeblogin */);
background:-o-linear-gradient(left, #000 0%, #111 25%);
background:-moz-linear-gradient(left, #000 0%, #111 25%);
background:-webkit-linear-gradient(left, #000 0%, #111 25%);
background:-ms-linear-gradient(left, #000 0%, #111 25%);
background:linear-gradient(left, #000 0%, #111 25%);
-webkit-box-shadow:1px 0 1px 0 #000, 0 2px 0 2px lightGray, 0 2px 0 3px #333;
   -moz-box-shadow:1px 0 1px 0 #000, 0 2px 0 2px lightGray, 0 2px 0 3px #333;
        box-shadow:1px 0 1px 0 #000, 0 2px 0 2px lightGray, 0 2px 0 3px #333;
/* Black Keyboard Key Style by www.superwebtricks.com */}
swt-black-kbk:hover {opacity:1;cursor:pointer}

B) For White Keyboard Keys

Use these css codes to display keyboard key in white color.

swt-white-kbk {/* White Keyboard Key Style by www.superwebtricks.com */
color:#000;
margin:0 5px;
padding:1px 5px;
font-family:courier new;
font-size:1.2em;
border:1px #fff;
-webkit-border-radius:3px;
   -moz-border-radius:3px;
        border-radius:3px;
background:-webkit-gradient(
  linear,
  left top,
  right top,
  color-stop(0%, #fff),
  color-stop(25%, #fff)
/* White Keyboard Key Style by Showeblogin */);
background:-o-linear-gradient(left, #fff 0%, #fff 25%);
background:-moz-linear-gradient(left, #fff 0%, #fff 25%);
background:-webkit-linear-gradient(left, #fff 0%, #fff 25%);
background:-ms-linear-gradient(left, #fff 0%, #fff 25%);
background:linear-gradient(left, #fff 0%, #fff 25%);
-webkit-box-shadow:1px 0 1px 0 #999, 0 2px 0 2px lightGray, 0 2px 0 3px #666;
    -moz-box-shadow:1px 0 1px 0 #999, 0 2px 0 2px lightGray, 0 2px 0 3px #666;
             box-shadow:1px 0 1px 0 #999, 0 2px 0 2px lightGray, 0 2px 0 3px #666;
/* White Keyboard Key Style by www.superwebtricks.com */}
swt-white-kbk:hover {opacity:1;cursor:pointer}

or instead of adding above two bunch of keys, you may add this file just before closing the Head Tag </head> of your blog template HTML.

<link href="https://img.superwebtricks.com/files/swt-keyboard-keys.css" rel="stylesheet" type="text/css" />

Step-2:

Secondly, you have to add these codes where you want to appear the Keyboard key either into your blog posts/pages or any other place.

Remind that you should have to insert codes in HTML view. However, if you want to add codes in Compose mode then just select “Interpret typed HTML” (the radio button) from right side option menu.

A) For Black Keyboard Keys

<swt-black-kbk>A</swt-black-kbk>

B) For White Keyboard Keys

<swt-white-kbk>A</swt-white-kbk>

Finally, replace latter “A” with any other character or symbol as you want to display keyboard key in your blog posts. For Example: If you want to show Ctrl + S simple texts as SWT Stylish Keyboard Keys, you need to add these codes.

<swt-black-kbk>Ctrl</swt-black-kbk>+<swt-black-kbk>S</swt-black-kbk>

Enjoy!