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!
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);
}
