Hallo
HTML + CSSTooltips

Tastatur mit Tastenvorschau

Eine Handytastatur, bei der jede Taste beim Drücken oder Fokussieren nach oben zu einer Blase mit großem Buchstaben wächst.

Einstellungen

16px
1x

Code

<div class="uvq08-kbd"><div class="fd"><span class="tx" aria-live="polite">Hallo</span><i class="cr" aria-hidden="true"></i></div><div class="kb" role="group" aria-label="Tastatur"><div class="rw"><button type="button" class="k lt" data-k="Q" tabindex="0">Q</button><button type="button" class="k lt" data-k="W" tabindex="-1">W</button><button type="button" class="k lt" data-k="E" tabindex="-1">E</button><button type="button" class="k lt" data-k="R" tabindex="-1">R</button><button type="button" class="k lt" data-k="T" tabindex="-1">T</button><button type="button" class="k lt" data-k="Y" tabindex="-1">Y</button><button type="button" class="k lt" data-k="U" tabindex="-1">U</button><button type="button" class="k lt" data-k="I" tabindex="-1">I</button><button type="button" class="k lt" data-k="O" tabindex="-1">O</button><button type="button" class="k lt" data-k="P" tabindex="-1">P</button></div><div class="rw"><button type="button" class="k lt" data-k="A" tabindex="-1">A</button><button type="button" class="k lt" data-k="S" tabindex="-1">S</button><button type="button" class="k lt" data-k="D" tabindex="-1">D</button><button type="button" class="k lt" data-k="F" tabindex="-1">F</button><button type="button" class="k lt" data-k="G" tabindex="-1">G</button><button type="button" class="k lt" data-k="H" tabindex="-1">H</button><button type="button" class="k lt" data-k="J" tabindex="-1">J</button><button type="button" class="k lt" data-k="K" tabindex="-1">K</button><button type="button" class="k lt" data-k="L" tabindex="-1">L</button><button type="button" class="k lt pk" data-k="Ñ" tabindex="-1">Ñ</button></div><div class="rw"><button type="button" class="k lt" data-k="Z" tabindex="-1">Z</button><button type="button" class="k lt" data-k="X" tabindex="-1">X</button><button type="button" class="k lt" data-k="C" tabindex="-1">C</button><button type="button" class="k lt" data-k="V" tabindex="-1">V</button><button type="button" class="k lt" data-k="B" tabindex="-1">B</button><button type="button" class="k lt" data-k="N" tabindex="-1">N</button><button type="button" class="k lt" data-k="M" tabindex="-1">M</button><button type="button" class="k bk" data-k="⌫" aria-label="Löschen" tabindex="-1">⌫</button></div><div class="rw"><button type="button" class="k sp" data-k=" " tabindex="-1">Leerzeichen</button></div></div></div>

Prompt für KI

Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Tooltips

Alle ansehen: Tooltips

Wofür du ihn nutzen kannst

Eine dunkle Handytastatur mit spanischem Layout samt Ñ und einem Nachrichtenfeld darüber. Beim Hovern, Fokussieren oder Drücken wächst eine Taste nach oben in die vertraute Blase mit großem Buchstaben, gebaut aus zwei Pseudoelementen, die sich an die Taste schmiegen. Die Tasten schreiben ins Feld, Pfeiltasten wechseln zwischen ihnen, und nur eine Taste liegt in der Tab-Reihenfolge.

Die Hauptfarbe setzt Cursor und Fokusring, die Zweitfarbe die Farbe der Blase. Ändere die Reihen für ein anderes Layout oder nutze die Blase für Ziffernblöcke, PIN-Eingaben und Bildschirmtastaturen an Terminals.