VIP邀请模块

以下是一个简单的HTML模块，包含一个邀请获得VIP的a标签样式：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VIP邀请模块</title>
    <style>
        .vip-invite-container {
            font-family: 'Arial', sans-serif;
            max-width: 300px;
            margin: 20px auto;
            padding: 20px;
            border-radius: 10px;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        
        .vip-invite-title {
            color: #333;
            font-size: 18px;
            margin-bottom: 15px;
            font-weight: bold;
        }
        
        .vip-invite-desc {
            color: #666;
            font-size: 14px;
            margin-bottom: 20px;
            line-height: 1.5;
        }
        
        .vip-invite-btn {
            display: inline-block;
            padding: 12px 25px;
            background: linear-gradient(to right, #ff8a00, #da1b60);
            color: white;
            text-decoration: none;
            border-radius: 30px;
            font-weight: bold;
            font-size: 16px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(218, 27, 96, 0.3);
        }
        
        .vip-invite-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(218, 27, 96, 0.4);
        }
        
        .vip-invite-btn:active {
            transform: translateY(0);
        }
        
        .vip-icon {
            font-size: 24px;
            margin-right: 8px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="vip-invite-container">
        <div class="vip-invite-title">🎉 专属VIP邀请</div>
        <div class="vip-invite-desc">
            邀请好友加入，双方均可获得VIP特权！<br>
            尊享更多高级功能和专属服务
        </div>
        <a href="#" class="vip-invite-btn">
            <span class="vip-icon">👑</span>
            立即邀请
        </a>
    </div>
</body>
</html>

这个模块包含以下特点：

渐变色背景和按钮，视觉效果更佳
悬停动画效果，提升用户体验
响应式设计，适应不同屏幕尺寸
添加了VIP相关的图标装饰
简洁明了的邀请文案

你可以根据需要修改：

链接地址(href="#")
文字内容
颜色方案
尺寸大小
添加更多功能或信息

相关推荐