一个复杂的响应式关注按钮组件,采用玻璃拟态风格和鲜艳的颜色,专为支持深色模式的商业网站设计,使用 Tailwind CSS.
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 px-4"> <div class="w-full max-w-sm bg-white dark:bg-gray-800/50 p-6 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 backdrop-filter backdrop-blur-lg glass glass-vibrant"> <div class="flex flex-col items-center"> <img class="w-24 h-24 rounded-full mb-4 object-cover border-4 border-blue-500 dark:border-teal-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar"> <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-1">John Doe</h2> <p class="text-sm text-gray-600 dark:text-gray-300 mb-4">Senior Developer</p> <button class="px-6 py-2 rounded-full bg-gradient-to-r from-blue-500 to-teal-500 text-white font-semibold shadow-lg transform transition duration-300 hover:scale-105 hover:from-blue-600 hover:to-teal-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:focus:ring-teal-400"> Follow </button> <div class="flex mt-6 space-x-4 text-gray-700 dark:text-gray-300"> <div class="flex items-center"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-2 0c0 .993-.241 1.929-.668 2.754l-1.524-1.524A3 3 0 0010 9a3 3 0 00-2.254.98l-1.524 1.524A8.01 8.01 0 012 10c0-4.411 3.589-8 8-8s8 3.589 8 8z" clip-rule="evenodd" /> <path fill-rule="evenodd" d="M10 12a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" /> </svg> <span>1.2k Followers</span> </div> <div class="flex items-center"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor"> <path d="M11 6a3 3 0 11-6 0 3 3 0 016 0zM14 10a4 4 0 01-8 0H5a6 6 0 0012 0h-1z" /> </svg> <span>250 Following</span> </div> </div> </div> </div> </div> <style> .glass { background-color: rgba(255, 255, 255, 0.2); } .dark .glass { background-color: rgba(50, 50, 50, 0.2); } .glass-vibrant { box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); } </style>
用于社交媒体的玻璃拟态关注按钮组件,支持深色主题。
适用于活动和会议网站的响应式关注/取消关注按钮组件,具有渐变过渡、深色模式支持和明亮的强调色。它包括微妙的悬停效果,并在单击时更改文本和背景(模拟)。
专为房地产平台设计的响应式“关注”按钮组件,具有企业蓝色配色方案、深色模式支持和微妙的交互式悬停效果。