Beispielanalyse, wie man mithilfe von CSS die Farbe von Schaltflächen ändern kann

Werfen wir zunächst einen Blick auf das endgültige Rendering:

Das ist unser bestes Ziel. Wenn Sie interessiert sind, dann lesen Sie weiter.

Zuallererst verwendet diese Schaltfläche die neuen Stilattribute von CSS3.0. Wenn Ihr Browser den Eckbogenstil nicht erkennt, bedeutet das, dass Ihre Browserversion den neuen Stil von CSS3.0 nicht unterstützt. Die Lösung besteht darin, Ihren Browser auf die neueste Version zu aktualisieren. Soweit ich weiß, unterstützen XP und Windows Server 2003 bis zu IE8 (Sie können den Effekt sehen. Wenn Sie den IE nicht aktualisieren möchten, müssen Sie einen Browser herunterladen, der nicht auf dem IE basiert, z. B. Firefox). Google, Opera usw.

Okay, bei all dem Unsinn, der vor uns liegt, werfen wir einen Blick darauf, wie wir unsere schönen Knöpfe herstellen.

Tatsächlich verwenden wir hier das CSS-Pseudoelement Hover.

Zuerst müssen wir eine Eingabetyp-Schaltfläche auf der Seite platzieren. Fügen Sie dieser Schaltfläche einen CSS-Stil hinzu.

Der spezifische CSS-Code lautet wie folgt:

.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;
}

Für eine spezifische Erklärung des CSS-Stils gehen Sie bitte zu Baidu, das Ihr CSS-Level verbessern kann. Wenn Sie keine CSS-Kenntnisse haben, diesen Effekt aber nutzen möchten, müssen Sie die Breite der Schaltfläche ändern und auf die entsprechende Breite Ihrer Schaltfläche einstellen. Eine andere Sache besteht darin, die Hintergrundfarbe zu ersetzen.

Nachdem wir den CSS-Stil und die Eingabeschaltfläche geschrieben haben, müssen wir sie nur noch der Eingabeschaltfläche hinzufügen.

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

Jetzt haben wir den letzten Schritt, der darin besteht, das CSS-Pseudoelement Hover

zu verwenden, um einen mybtn-Hover-Stil zu schreiben. Der Code lautet wie folgt:

.mybtn:hover {
    background: #f47c20;
}

Da wir nur die Hintergrundfarbe ändern müssen, wenn wir die Maus nach oben bewegen, müssen wir nur ein Attribut im Hover-Stil ändern.

Das obige ist der detaillierte Inhalt vonBeispielanalyse, wie man mithilfe von CSS die Farbe von Schaltflächen ändern kann. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!