mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-06 14:16:50 +02:00
60 lines
1.2 KiB
Plaintext
60 lines
1.2 KiB
Plaintext
---
|
|
category: Display
|
|
created: '2019-12-16'
|
|
description: Create a keyboard shortcut with CSS
|
|
keywords: kbd tag, keyboard shortcut
|
|
thumbnail: /assets/css-layout/thumbnails/keyboard-shortcut.png
|
|
title: Keyboard shortcut
|
|
---
|
|
|
|
We use the native `kbd` tag to display the keyboard shortcut.
|
|
|
|
## HTML
|
|
|
|
```html index.html
|
|
<kbd class="keyboard-shortcut">...</kbd>
|
|
```
|
|
|
|
## CSS
|
|
|
|
```css styles.css
|
|
.keyboard-shortcut {
|
|
/* Background and color */
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
border-radius: 0.25rem;
|
|
color: rgba(0, 0, 0, 0.7);
|
|
|
|
/* Bottom shadow */
|
|
box-shadow: #d1d5db 0px -4px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px;
|
|
|
|
/* Spacing */
|
|
padding: 0.25rem 0.5rem;
|
|
}
|
|
```
|
|
|
|
<Playground>
|
|
```css styles.css hidden
|
|
body {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.keyboard-shortcut {
|
|
/* Background and color */
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
border-radius: 0.25rem;
|
|
color: rgba(0, 0, 0, 0.7);
|
|
|
|
/* Bottom shadow */
|
|
box-shadow: #d1d5db 0px -4px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px;
|
|
|
|
/* Spacing */
|
|
padding: 0.25rem 0.5rem;
|
|
}
|
|
```
|
|
|
|
```html index.html hidden
|
|
<kbd class="keyboard-shortcut">⌘ + C</kbd>
|
|
```
|
|
</Playground>
|