Comment implémenter un style de bouton simple en utilisant HTML-connaissance HTML-php.cn

Maison

programmation quotidienne

connaissance HTML

Comment implémenter un style de bouton simple en utilisant HTML

藏色散人

Nov 10, 2018 pm 04:31 PM

Cet article présente principalement comment utiliser le HTML pour implémenter un style de bouton simple.

Dans le processus de conception Web, la configuration des boutons peut être considérée comme la compétence de connaissance HTML/CSS la plus courante et de base.

Tutoriel vidéo de référence recommandé : "Tutoriel HTML"

Ce qui suit est un exemple de code pour présenter aux amis novices comment utiliser HTML pour implémenter un bouton simple style.

style de bouton bouton L'exemple de code est le suivant :

<!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>

Copier après la connexion

L'effet est le suivant :

Comment implémenter un style de bouton simple en utilisant HTML

Introduction aux attributs associés :

transition-duration L'attribut spécifie le temps nécessaire pour terminer l'effet de transition. L'attribut -transition-duration est destiné à la compatibilité du navigateur Safari. L'attribut

text-align spécifie l'alignement horizontal du texte dans l'élément. La valeur de center signifie que le texte est centré horizontalement. L'attribut

border-radius permet d'ajouter une bordure arrondie à un élément.

:hover Le sélecteur est utilisé pour sélectionner l'élément sur lequel le pointeur de la souris flotte. En termes simples, il définit un nouveau style lorsque la souris se déplace vers l'élément spécifié.

Présentation des balises associées :

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn