HTML + CSSButtons

3D-Button zum Drücken

Ein kräftiger Button mit fester Schattenkante darunter, der beim Klicken ganz nach unten sinkt.

Einstellungen

16px
1x

Code

<button class="uv-3d">Drücken</button>

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.

Mehr aus Buttons

Wofür du ihn nutzen kannst

Dieser 3D-Button fühlt sich an wie eine echte Taste und passt deshalb zu verspielten Oberflächen: der „Prüfen“-Button einer Sprachlern-App, der Startbildschirm eines Browserspiels oder „Weiter“ auf einer Lernseite für Kinder. Beim Hover hebt er sich etwas, beim Klick drückt er sich flach auf seinen eigenen Schatten.

Der Schatten ist eine dunklere Stufe der Hauptfarbe, darum funktionieren mittlere Töne besser als sehr dunkle. Runde, freundliche Schriften passen gut dazu. Für eine Bank, eine Kanzlei oder alles, was seriös wirken soll, nimm lieber einen flachen Button.