So implementieren Sie einen einfachen Schaltflächenstil mithilfe von HTML-HTML-Kenntnisse-php.cn

Heim

tägliche Programmierung

HTML-Kenntnisse

So implementieren Sie einen einfachen Schaltflächenstil mithilfe von HTML

藏色散人

Nov 10, 2018 pm 04:31 PM

In diesem Artikel wird hauptsächlich die Verwendung von HTML zum Implementieren eines einfachen Schaltflächenstils vorgestellt.

Im Prozess des Webdesigns kann man sagen, dass das Setzen von Schaltflächen die häufigste und grundlegendste HTML/CSS-Kenntnis ist.

Empfohlenes Referenzvideo-Tutorial: „HTML-Tutorial“

Das Folgende ist ein Codebeispiel, um unerfahrenen Freunden vorzustellen, wie man mit HTML eine einfache Schaltfläche implementiert Stil.

Button-Button-StilDas Codebeispiel lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>button按钮样式</title>
    <style>
        .button1 {
            -webkit-transition-duration: 0.4s;
            transition-duration: 0.4s;
            padding: 16px 32px;
            text-align: center;
            background-color: white;
            color: black;
            border: 2px solid #4CAF50;
            border-radius:5px;
        }
        .button1:hover {
            background-color: #4CAF50;
            color: white;
        }
    </style>
</head>
<body>
<button class="button1">Green</button>
</body>
</html>

Nach dem Login kopieren

Der Effekt ist wie folgt:

So implementieren Sie einen einfachen Schaltflächenstil mithilfe von HTML

Einführung in verwandte Attribute:

Übergangsdauer Das Attribut gibt die Zeit an, die benötigt wird, um den Übergangseffekt abzuschließen Das Attribut -duration dient der Kompatibilität mit dem Browser Safari. Das Attribut

text-align gibt die horizontale Ausrichtung des Textes im Element an. Der Wert „center“ bedeutet, dass der Text horizontal zentriert ist. Mit dem Attribut

border-radius können Sie einem Element einen abgerundeten Rand hinzufügen.

:hover Der Selektor wird verwendet, um das Element auszuwählen, auf dem der Mauszeiger schwebt. Einfach ausgedrückt legt er einen neuen Stil fest, wenn sich die Maus zum angegebenen Element bewegt.

Einführung in verwandte Tags:

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn