Friday, January 2, 2015

WordPress & Blogspot : Keyboard button (kbd) tag

Peace be upon you and hello fellas,
Do you want keyboard button / thumb on blog post, like StackOverflow website? It look awesome for HCI and UI/UX itself. So I found a custom CSS that can be use with our blog theme by styling the kbd tags

Example : Press Ctrl+Alt+Del to restart your computer

How to :
That looks cool and much more better representing the keyboard key in button. Simply, just open your own theme CSS for Wordpress cms or open template editor->Add CSS for Blogspot and paste the code below:

kbd {
 padding:0.1em 0.6em;
 border:1px solid #ccc;
 font-size:11px;
 font-family:Arial,Helvetica,sans-serif;
 background-color:#f7f7f7;
 color:#333;
 -moz-box-shadow:0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
 -webkit-box-shadow:0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
 box-shadow:0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
 border-radius:3px;
 display:inline-block;
 margin:0 0.1em;
 text-shadow:0 1px 0 #fff;
 line-height:1.4;
 white-space:nowrap;
}

Now, just use <kbd> tags when you want to have some button of keyboard. Kindly, credit to The Dron Zone blog for showing the way

2 comments:

  1. Hi everybody,,,i've bought a Keyboard from https://musiquedepot.ca/ .Really it's a very helpful site.So,don't miss it.Thank you.

    ReplyDelete