Home > Article > Web Front-end > Very practical! CSS implements the dynamic effect of pressing when a button is clicked

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

藏色散人Original: 2021-08-27 10:31:3911406browse

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>

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Pure CSS3 creates an animated special effect where the border shadow spreads outwardsNext article：Pure CSS3 creates an animated special effect where the border shadow spreads outwards

See more

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

Related articles