Exemple d'analyse de la façon de faire changer la couleur des boutons en utilisant CSS

Jetons d’abord un coup d’œil au rendu final :

C’est notre meilleur objectif. Si vous êtes intéressé, très bien, continuez à lire.

Tout d'abord, ce bouton utilise les nouveaux attributs de style de css3.0. Si votre navigateur ne voit pas le style d'arc de coin, cela signifie que la version de votre navigateur ne prend pas en charge le nouveau style CSS3.0. La solution consiste à mettre à niveau votre navigateur vers la dernière version. Autant que je sache, XP et Windows Server 2003 prennent en charge jusqu'à IE8 (vous pouvez voir l'effet). Si vous ne souhaitez pas mettre à niveau IE, vous devez télécharger un navigateur qui n'est pas basé sur IE, tel que Firefox. Google, Opéra, etc.

D'accord avec toutes les bêtises qui nous attendent, voyons comment fabriquer nos magnifiques boutons.

En fait, nous utilisons ici le pseudo-élément CSS, hover.

Nous devons d’abord placer un bouton de type de saisie sur la page. Ajoutez un style CSS à ce bouton.

Le code CSS spécifique est le suivant :

.mybtn {
    width:86px;
    text-align:center;
    line-height:100%;
    padding-top:0.5em;
    padding-right:2em;
    padding-bottom:0.55em;
    padding-left:2em;
    font-family:Arial,sans-serif;
    font-size:14px;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    text-decoration:none;
    margin-top:0px;
    margin-right:2px;
    margin-bottom:0px;
    margin-left:2px;
    vertical-align:text-bottom;
    display:inline-block;
    cursor:pointer;
    zoom:1;
    outline-width:medium;
    outline-color:invert;
    font-size-adjust:none;
    font-stretch:normal;
    border-top-left-radius:0.5em;
    border-top-right-radius:0.5em;
    border-bottom-left-radius:0.5em;
    border-bottom-right-radius:0.5em;
    box-shadow:0px 1px 2px rgba(0,0,0,0.2);
    text-shadow:0px 1px 1px rgba(0,0,0,0.3);
    color:#fefee9;
    border-top-color:#da7c0c;
    border-right-color:#da7c0c;
    border-bottom-color:#da7c0c;
    border-left-color:#da7c0c;
    border-top-width:1px;
    border-right-width:1px;
    border-bottom-width:1px;
    border-left-width:1px;
    border-top-style:solid;
    border-right-style:solid;
    border-bottom-style:solid;
    border-left-style:solid;
    background-image:none;
    background-attachment:scroll;
    background-repeat:repeat;
    background-position-x:0%;
    background-position-y:0%;
    background-size:auto;
    background-origin:padding-box;
    background-clip:padding-box;
    background-color:#f78d1d;
}

Pour une explication spécifique du style CSS, veuillez vous rendre sur Baidu, qui peut améliorer votre niveau CSS. Si vous ne connaissez pas les compétences CSS mais souhaitez utiliser cet effet, vous devez modifier la largeur du bouton et la définir sur la largeur appropriée de votre bouton. Une autre chose est de remplacer la couleur d'arrière-plan.

Après avoir écrit le style CSS et le bouton du bouton de saisie, nous devons les associer. Il suffit d'ajouter la classe au bouton de saisie.

<input type="button" class="mybtn" value="我是按钮" />

Nous avons maintenant la dernière étape, qui consiste à utiliser le survol de pseudo-éléments de CSS,

pour écrire un style de survol mybtn. Le code est le suivant :

.mybtn:hover {
    background: #f47c20;
}

Comme nous n'avons besoin de modifier la couleur d'arrière-plan que lorsque nous déplaçons la souris vers le haut, nous n'avons besoin de modifier qu'un seul attribut dans le style de survol.

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!