Maison > Article > interface Web > Très pratique ! CSS implémente l'effet dynamique d'appuyer lorsqu'un bouton est cliqué

Très pratique ! CSS implémente l'effet dynamique d'appuyer lorsqu'un bouton est cliqué

藏色散人original: 2021-08-27 10:31:3911318parcourir

Dans l'article précédent "Comment créer rapidement une animation de chargement en 3 points avec CSS", je vous ai présenté comment utiliser CSS pour créer un effet d'animation de chargement en 3 points. Les amis intéressés peuvent le lire et en apprendre davantage ~

. Cet article vous le présentera. Un effet dynamique très pratique dans le processus de conception front-end consiste à afficher l'effet dynamique d'un clic sur un bouton. Vous ne comprendrez peut-être pas quel est l'effet simplement en le disant. lors d'une animation :

GIF 2021-8-27 星期五上午 10-19-37.gif

Mais cet article présentera non seulement l'effet dynamique de ce type de pressage, mais en présentera également un autre, continuez à lire !

La première méthode d'implémentation de l'effet :

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /* 为按钮添加一些基本样式 */

        .btn {
            text-decoration: none;
            border: none;
            padding: 12px 40px;
            font-size: 16px;
            background-color: green;
            color: #fff;
            border-radius: 5px;
            box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);
            cursor: pointer;
            outline: none;
            transition: 0.2s all;
        }
        /* 在按钮处于活动状态时添加转换 */

        .btn:active {
            transform: scale(0.98);
            box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);

        }
    </style>
</head>

<body>

<!-- 带有类&#39;btn&#39;的按钮 -->
<button class="btn">Button</button>

</body>
</html>

L'effet est le suivant :

GIF 2021-8-27 星期五上午 10-19-37.gif

Remarque : L'attribut

transform applique une transformation 2D ou 3D à l'élément.

Utilisez la propriété CSS transform pour ajouter un effet de presse lorsque le bouton est actif. La propriété CSS transform nous permet de redimensionner, faire pivoter, déplacer et incliner les éléments.

Méthode d'implémentation du deuxième effet :

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /* 向按钮添加基本样式 */

        .btn {
            padding: 15px 40px;
            font-size: 16px;
            text-align: center;
            cursor: pointer;
            outline: none;
            color: #fff;
            background-color: #ff311f;
            border: none;
            border-radius: 5px;
            box-shadow: box-shadow:
            7px 6px 28px 1px rgba(0, 0, 0, 0.24);
        }
        /* “active”添加样式 */

        .btn:active {
            box-shadow: box-shadow:
            7px 6px 28px 1px rgba(0, 0, 0, 0.24);
            transform: translateY(4px);
        }
    </style>
</head>

<body>

<button class="btn">点击我</button>
</body>
</html>

L'effet est le suivant :

GIF 2021-8-27 星期五上午 10-27-05.gif

Remarque : Lorsque la pseudo-classe active est active, vous pouvez utiliser d'autres méthodes pour créer vos propres effets lorsque vous cliquez sur le bouton.

La plate-forme de site Web chinois PHP propose de nombreuses ressources pédagogiques vidéo, invitez tout le monde à apprendre le "tutoriel vidéo CSS" !

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!

Déclaration：

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

Article précédent：Pure CSS3 crée un effet spécial animé où l'ombre de la bordure s'étend vers l'extérieurArticle suivant：Pure CSS3 crée un effet spécial animé où l'ombre de la bordure s'étend vers l'extérieur

Articles Liés

Voir plus