Home > Article > Web Front-end > Very practical! CSS implements the dynamic effect of pressing when a button is clicked
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:
# 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>
<!-- 带有类'btn'的按钮 -->
<button class="btn">Button</button>
</body>
</html>The effect is as follows:
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:
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!