Comment faire un bouton 3D en utilisant CSS

L'interface graphique d'une page Web joue un rôle vital dans la qualité d'un site Web ou d'une application Web. Pour augmenter la convivialité et rendre l'interface attrayante, de nombreuses idées sont pratiquées. Comme d'autres éléments d'une interface, il y a aussi des boutons sur presque toutes les autres page Web qui effectuent des opérations différentes. L'une des techniques les plus courantes pour améliorer l'affichage graphique d'une interface est la création d'un bouton 3D plutôt que le bouton traditionnel ordinaire.

Discutons de la façon dont un bouton 3D est créé et ajouté à une page Web via le style CSS.

Création d'un bouton 3D à l'aide de CSS

Ajoutons un exemple simple de création d'un bouton 3D dans HTML à l'aide de propriétés de style CSS. Commencez par créer une balise d'ancrage avec l'attribut HREF égal au «javascript: void (0)”Fonction Pour créer un bouton clickable simple:

= "JavaScript: void (0);"> Cliquez ici!

La balise créée a un attribut HREF contenant le «javascript: void (0)" fonction. Cette fonction modifie la forme du curseur lorsqu'elle est pointée sur le bouton. Entre les balises d'ancrage d'ouverture et de fermeture se trouve le texte à afficher sur le bouton "Cliquez ici".

Maintenant, il est nécessaire de styliser le bouton simple à travers les propriétés de style CSS pour créer un écran tridimensionnel:

Ajoutez des propriétés de décoration de texte pour que le texte soit affiché sur le bouton:

Couleur: RVB (236, 234, 234);
Décoration du texte: aucune;
Color en arrière-plan: RVB (165, 16, 133);
Font-Family: Georgia, «Times New Roman», Times, Serif;
taille de police: 3EM;
bloc de visualisation;

Ensuite, il y en a ajouté "trousse»Propriétés pour ajouter des effets d'ombre et du rayon au bouton:

-Webkit-fronde-radius: 9px;
-webkit-box-shadow: 0px 9px 0px rgb (114, 19, 98), 0px 9px 25px rgba (0, 0, 0, .7);
-moz-box-shadow: 0px 9px 0px rgb (126, 22, 108), 0px 9px 25px rgba (0, 0, 0, .7);
Box-Shadow: 0px 9px 0px RGB (133, 12, 113), 0px 9px 25px rgba (0, 0, 0, .7);

Le bouton doit également être décoré en ce qui concerne sa surface, sa marge et son rembourrage, etc.:

marge: 100px auto;
Largeur: 160px;
Texte-aligne: Centre;
rembourrage: 4px;

Pour ajouter des effets d'ombre au bouton lorsqu'il est actif ou cliqué, il y a un CSS ":actif»Selecteur:

a: actif
-webkit-box-shadow: 0px 3px 0px rgb (102, 27, 96), 0px 3px 6px rgba (0, 0, 0, .9);
-moz-box-shadow: 0px 3px 0px rgb (112, 27, 91), 0px 3px 6px rgba (0, 0, 0, .9);
Box-Shadow: 0px 3px 0px RGB (126, 8, 116), 0px 3px 6px rgba (0, 0, 0, .9);
Position: relative;
En haut: 7px;

L'extrait de code complet pour la création du bouton est le suivant:

Couleur: RVB (236, 234, 234);
Décoration du texte: aucune;
Color en arrière-plan: RVB (165, 16, 133);
Font-Family: Georgia, «Times New Roman», Times, Serif;
taille de police: 3EM;
bloc de visualisation;
rembourrage: 4px;
-Webkit-fronde-radius: 9px;
-webkit-box-shadow: 0px 9px 0px rgb (114, 19, 98), 0px 9px 25px rgba (0, 0, 0, .7);
-moz-box-shadow: 0px 9px 0px rgb (126, 22, 108), 0px 9px 25px rgba (0, 0, 0, .7);
Box-Shadow: 0px 9px 0px RGB (133, 12, 113), 0px 9px 25px rgba (0, 0, 0, .7);
marge: 100px auto;
Largeur: 160px;
Texte-aligne: Centre;
a: actif
-webkit-box-shadow: 0px 3px 0px rgb (102, 27, 96), 0px 3px 6px rgba (0, 0, 0, .9);
-moz-box-shadow: 0px 3px 0px rgb (112, 27, 91), 0px 3px 6px rgba (0, 0, 0, .9);
Box-Shadow: 0px 3px 0px RGB (126, 8, 116), 0px 3px 6px rgba (0, 0, 0, .9);
Position: relative;
En haut: 7px;

Après avoir exécuté le code ci-dessus, ce qui suit sera la sortie:

Cela résume la méthode pour créer un bouton 3D à l'aide de CSS.

Conclusion

La fabrication d'un bouton 3D clickable via la propriété de style CSS nécessite d'abord de créer un bouton simple via une balise HTML, puis d'appliquer les propriétés du kit Web CSS ainsi que d'autres propriétés se référant à la balise HTML à travers laquelle le bouton a été créé. Cela donne au bouton un aspect tridimensionnel. Pour ajouter les effets au bouton de l'instance lorsque le bouton est cliqué ou actif, utilisez le sélecteur actif CSS.