Run ❯
Get your
own
website
❯
Run Code
Ctrl+Alt+R
Change Orientation
Ctrl+Alt+O
Change Theme
Ctrl+Alt+D
Go to Spaces
Ctrl+Alt+P
HTML
CSS
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css" type="text/css"> </head> <body> <button class="button"> Save draft <span class="tooltip">Shortcut: Ctrl + S</span> </button> </body> </html>
.button { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; background: #1d4ed8; color: #fff; cursor: pointer; font-family: "Inter",sans-serif; } .button span.tooltip { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%); background: #0f172a; color: #fff; padding: 8px 12px; border-radius: 8px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 10; } .button:hover span.tooltip { opacity: 1; transform: translate(-50%, -4px); }
