Page 1 of 1
Forum

Welcome to the Tweaking4All community forums!
When participating, please keep the Forum Rules in mind!

Topics for particular software or systems: Start your topic link with the name of the application or system.
For example “MacOS X – Your question“, or “MS Word – Your Tip or Trick“.

Please note that switching to another language when reading a post will not bring you to the same post, in Dutch, as there is no translation for that post!




Share:
Notifications
Clear all

CSS - How to create a keyboard button


 Hans
(@hans)
Noble Member Admin
Joined: 8 years ago
Posts: 2005
Topic starter  

Here a quick example how you can create a keyboard button with CSS.

First of all, the text that is to be displayed on the key should be enclosed with a span tag and a class, in HTML code. Something like this to mimic a "Enter" key (can be anything for that matter - even a <i class="icon-xyz"></i> as used by IcoMoon can be encapsulated in that <span>, for example to display the Windows key):

<span class="keyboardkey">Enter</span>

Obviously, you can use a different HTML tag, but for in-text display "span" is one of the usual ones.

The CSS for a of span "keyboardkey" is then defined as something like this:

span.keyboardkey {
    box-shadow: rgb(132 132 132 / 0.16) 1px 1px 4px 1px;
    text-shadow: none;
    font-weight: bold;
    margin-right: 4px;
    margin-left: 4px;
    font-family: Lucida Sans Unicode,Lucida Grande,sans-serif;
    font-size: 14px;
    padding: 0.2em 1em;
    border: 1px solid;
    border-color: #d6d6d6 #b4b4b4 #b4b4b4 #d6d6d6;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background-color: #F2F2F2;
    background-image: -moz-linear-gradient(top, #FCFCFC, #E0E0E0);
    background-image: -o-linear-gradient(top, #FCFCFC, #E0E0E0);
    background-image: -webkit-linear-gradient(top, #FCFCFC, #E0E0E0);
    background-image: linear-gradient(top, #FCFCFC, #E0E0E0);
}

 This CSS will produce a button like this:

 

You could of course argue that a button is not curved "up" like the button shown, but is rather curved down, and you'd rather see a key this:

That is an option as well, by doing a minor modification in the CSS (the red bold part of the colors in the code is flipped):

span.keyboardkey {
    box-shadow: rgb(132 132 132 / 0.16) 1px 1px 4px 1px;
    text-shadow: none;
    font-weight: bold;
    margin-right: 4px;
    margin-left: 4px;
    font-family: Lucida Sans Unicode,Lucida Grande,sans-serif;
    font-size: 14px;
    padding: 0.2em 1em;
    border: 1px solid;
    border-color: #d6d6d6 #b4b4b4 #b4b4b4 #d6d6d6;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background-color: #F2F2F2;
    background-image: -moz-linear-gradient(top, #E0E0E0, #FCFCFC);
    background-image: -o-linear-gradient(top, #E0E0E0, #FCFCFC);
    background-image: -webkit-linear-gradient(top, #E0E0E0, #FCFCFC);
    background-image: linear-gradient(top, #E0E0E0, #FCFCFC);
}

 


ReplyQuote

Like what you see and you'd like to help out? 

The best way to help is of course by assisting others with their questions here in the forum, but you can also help us out in other ways:

- Do your shopping at Amazon, it will not cost you anything extra but may generate a small commission for us,
- send a cup of coffee through PayPal ($5, $10, $20, or custom amount),
- become a Patreon,
- donate BitCoin (BTC), or BitCoinCash (BCH).

Share: