HTML + CSSBoutons

Bouton 3D qui s'enfonce

Un bouton épais avec une ombre pleine en dessous, qui s'enfonce jusqu'au bout quand on clique.

Réglages

16px
1x

Code

<button class="uv-3d">Appuyer</button>

Prompt pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Plus dans Boutons

Où l’utiliser

Ce bouton 3D donne l'impression d'une vraie touche, il est donc à sa place dans les interfaces ludiques : le « Vérifier » d'une application pour apprendre une langue, l'écran « Jouer » d'un jeu en ligne ou le « Suivant » d'un site éducatif pour enfants. Au survol il se soulève, au clic il s'écrase sur son ombre.

L'ombre est une version plus foncée de la couleur principale : les tons moyens fonctionnent mieux que les très sombres. Les polices arrondies lui vont bien. Pour une banque, un cabinet d'avocats ou un site qui doit inspirer le sérieux, préférez un bouton plat.