一、实现效果
二、实现过程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box{
margin:100px 0 0 200px;
}
.button {
cursor: pointer;
width: 184px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
font-size: 1.125em;
font-weight: 800;
letter-spacing: 2px;
color: #fff;
background: #ed11c5;
border: 2px solid #ed11c5;
border-radius: 0.75rem;
box-shadow: 0 8px 0 #9a2685;
transform: skew(-10deg);
transition: all 0.1s ease;
filter: drop-shadow(0 15px 20px #ed11c5);
}
.button:active {
letter-spacing: 0px;
transform: skew(-10deg) translateY(8px);
box-shadow: 0 0 0 #9a2685;
}
</style>
</head>
<body>
<div class="box">
<button class="button">BUTTON</button>
</div>
</body>
</html>
三、不常用的css解释
transform: skew(-10deg) translateY(8px);按钮被按下时，斜角不变，但向下移动 8 像素。
4264
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
