CSS pour obtenir un effet de bouton 3D

Cette fois, je vais vous apporter du CSS pour obtenir un effet de bouton 3D. Quelles sont les précautions pour que CSS obtienne un effet de bouton 3D. Voici un cas pratique, jetons un coup d'œil.

CSS utilise intelligemment box-shadow pour obtenir l'effet tridimensionnel des objets 3D. Lorsque vous appuyez sur le bouton, les valeurs box-shadow et top sont modifiées.

C'est comme si on appuyait sur un bouton. Le code CSS est très petit, comme indiqué ci-dessous

a.css-3d-btn{
 position: relative;
 color: rgba(255, 255, 255, 1);
 text-decoration: none;
 background-color: rgba(219, 87, 51, 1);
 font-family: "Microsoft YaHei", 微软雅黑, 宋体;
 font-weight: 700;
 font-size: 3em;
 display: block;
 padding: 4px;
 border-radius: 8px;
 /* let's use box shadows to make the button look more 3-dimensional */
 box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
 margin: 100px auto;
 width: 160px;
 text-align: center;
 -webkit-transition: all .1s ease;
 -moz-transition: all .1s ease;
 transition: all .1s ease;
}
/* now if we make the box shadows smaller when the button is clicked, it'll look like the button has been "pushed" */
a.css-3d-btn:active{
 box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);
 position: relative;
 top: 6px;
}

L'effet est le suivant :

Je le crois après l'avoir lu. Vous maîtrisez la méthode dans le cas de cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Utilisez transparent pour créer un triangle

Barre de progression de chargement HTML5+CSS3 et implémentation de la barre de progression de téléchargement

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!