|
|
发表于
2025-12-28 18:39:20
来自手机
|
显示全部楼层
| 阅读模式
来自 湖南
本帖最后由 感情 于 2025-12-28 18:40 编辑
这个按钮也是非常好看
点击有交互动作
嗯，在一个地方的网站抠下来的
想要可以拿走<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.magic-button {
position: relative;
background: #0f172a;
border: 2px solid #0d9488;
color: white;
font-size: 16px;
font-weight: bold;
border-radius: 12px;
cursor: pointer;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
width: 256px;
height: 64px;
text-align: left;
padding-left: 24px;
outline: none;
display: flex;
align-items: center;
}
.light-purple {
position: absolute;
width: 40px;
height: 40px;
background: #8b5cf6;
border-radius: 50%;
filter: blur(8px);
opacity: 0.7;
right: 8px;
top: 8px;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1;
}
.light-teal {
position: absolute;
width: 64px;
height: 64px;
background: #2dd4bf;
border-radius: 50%;
filter: blur(8px);
opacity: 0.7;
right: 24px;
top: 16px;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1;
}
.magic-button:hover {
transform: scale(1.05);
border-color: #34d399;
box-shadow: 0 0 30px rgba(52, 211, 153, 0.4);
}
.magic-button:hover .light-purple {
transform: translateX(20px) translateY(10px);
filter: blur(4px);
opacity: 0.8;
}
.magic-button:hover .light-teal {
transform: translateX(-40px) scale(1.1);
opacity: 0.8;
}
.magic-button:active {
transform: scale(0.95);
transition-duration: 0.1s;
}
.button-text {
position: relative;
z-index: 2;
transition: color 0.3s ease;
}
.magic-button:hover .button-text {
color: #a7f3d0;
}
</style>
</head>
<body>
<button class="magic-button">
<div class="light-purple"></div>
<div class="light-teal"></div>
<span class="button-text">Explore More</span>
</button>
</body>
</html> |
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有账号？立即注册
x
|
苏公网安备 32010602011309号
|
苏ICP备19064627号
变色卡
