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!



CSS - How to create...
 
Share:
Notifications
Clear all

[Solved] CSS - How to create a keyboard button

1 Posts
1 Users
0 Reactions
4,167 Views
 Hans
(@hans)
Famed Member Admin
Joined: 11 years ago
Posts: 2805
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
Share: