Very practical! CSS implements the dynamic effect of pressing when a button is clicked-CSS Tutorial-php.cn

Very practical! CSS implements the dynamic effect of pressing when a button is clicked

藏色散人

Release： 2021-08-27 10:31:59

Original

11382 people have browsed it

In the previous article "How to use css to quickly create a 3-point loading animation", I introduced how to use css to create a 3-point loading animation effect. Interested friends can read and learn about it~

This article will introduce to you a very practical dynamic effect in the front-end design process, which is to display the dynamic effect of pressing when a button is clicked. You may not understand what the effect is just by saying it, we can see it directly An animated picture:

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

# However, this article will not only introduce the dynamic effect of pressing this one, but also introduce another one, keep reading!

The first effect implementation method:

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

Copy after login

The effect is as follows:

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

Note:

# The ##transform attribute applies a 2D or 3D transformation to an element.

Use the CSS transform property to add a press effect when the button is active. The CSS transform property allows us to scale, rotate, move and skew elements.

The second effect implementation method:

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

Copy after login

The effect is as follows:

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

Note: When active pseudo-class While active, you can use other methods to create your own effects when the button is clicked.

PHP Chinese website platform has a lot of video teaching resources. Welcome everyone to learn "

css Video Tutorial"!

The above is the detailed content of Very practical! CSS implements the dynamic effect of pressing when a button is clicked. For more information, please follow other related articles on the PHP Chinese website!