Stylish Keyboard Buttons in Posts with pure CSS

There are so many bloggers out there who post about Photoshop tutorials and many other similar blogs. These types of blogs need fully demonstration in the posts. Writer have to tell everything in practical way, it will be amazing if we add keyboard button style as well. Take a look at the demo picture below.

Take a look at the styles in the picture, it looks pretty awesome. It is just like a keyboard button. It provides effectiveness to the blog posts. You might not know about it but HTML has already introduced Keyboard tag. It is written as <kbd> and you can read more about it on W3Schools. We just have to add styles to this tag, so let's start now...

 

Adding the Awesomeness

Log in to your desired blog and go to Templates > Edit HTML as shown in the image below.

Now press Ctrl + F and find ]]></b:skin> in the template. Paste the following code just above that tag.

kbd{
border:1px solid #e3e3e3;
font-size:1.2em;
box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:2px 3px;
padding:1px 5px;
}

 

Now you can use this tag by putting <kbd> before any text. You can paste it as <kbd>Ctrl</kbd> + <kbd>F</kbd>. It will show keyboard button as we styled.

 

Changing the Styles

If you don't like the white background then you can use any other background color instead of white. After adding background color tag, your code will become something like this.

Read here to fix and add share buttons to your blog

kbd{
border:1px solid #e3e3e3;
font-size:1.2em;
background: #eee;
box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:2px 3px;
padding:1px 5px;
}

 

You can use any other background color instead of #eee, and I am sure you know enough CSS tags to make more changings.

 

Conclusion

So here is the tag we added and gave it awesome styles. Well I used to watch this on other sites until I made it for my own blog. Well this is an awesome new markup and trust me, I am loving it.