很實用！ CSS實現在點擊按鈕時顯示按下的動態效果
- 藏色散人原創
- 2021-08-27 10:31:3911453瀏覽
在上一篇《如何用css快速創建3點加載動畫》中給大家介紹瞭如何用css創建3點加載動畫效果，有興趣的朋友可以去閱讀了解一下~
本文將介紹在前端設計過程中非常實用的一個動態效果，就是在點擊按鈕時顯示按下的動態效果，光說可能大家還不明白是什麼效果，我們可以直接看一個動圖：
不過本文不僅會介紹實現這一種按下的動態效果，還會介紹另一種，繼續往下看！
第一種效果實作方法：
<!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>效果如下：
第二種效果實作方法：
<!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>效果如下：
以上是很實用！ CSS實現在點擊按鈕時顯示按下的動態效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn