サイバーパンクフォローボタンコンポーネント
CRM/ビジネスツール用の複雑なサイバーパンクをテーマにした「フォロー」ボタンコンポーネントで、フォレスト/グリーンのカラーパレット、暗い背景、明るいネオンのアクセントが特徴で、完全な応答性とダークモードがサポートされています。
HTMLコード
<div class="flex items-center justify-center p-4 bg-gray-900 min-h-screen dark:bg-black font-mono relative overflow-hidden">
<!-- Cyberpunk background grid elements -->
<div class="absolute inset-0 z-0 opacity-10">
<div class="absolute inset-0 bg-gradient-to-br from-green-900 via-gray-900 to-green-900 animate-pulse-slow"></div>
<div class="absolute inset-0 bg-grid-pattern-small md:bg-grid-pattern-large opacity-5"></div>
<div class="absolute inset-0 bg-dots-pattern opacity-5"></div>
</div>
<div class="bg-gradient-to-br from-gray-800 to-gray-950 dark:from-gray-950 dark:to-black p-6 md:p-8 rounded-2xl shadow-neon-green border border-green-700/50 relative z-10 w-full max-w-md mx-auto transform hover:scale-[1.01] transition-transform duration-300 ease-in-out">
<!-- Glitch effect pseudo-element for aesthetic -->
<div class="absolute inset-0 rounded-2xl pointer-events-none after:content-[''] after:absolute after:inset-0 after:bg-gradient-to-br after:from-green-500/20 after:via-transparent after:to-green-500/20 after:animate-glitch after:mix-blend-overlay"></div>
<div class="flex flex-col items-center space-y-6">
<!-- Profile Card Start -->
<div class="w-full bg-gray-900 dark:bg-black p-4 rounded-xl border border-green-800 shadow-inner-neon relative">
<div class="relative w-24 h-24 mx-auto mb-4 rounded-full border-2 border-green-400 overflow-hidden shadow-md shadow-green-500/30 ring-2 ring-green-600 ring-offset-2 ring-offset-gray-900">
<img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
<div class="absolute inset-0 bg-gradient-to-br from-green-500/30 to-transparent animate-pulse-fast opacity-50"></div>
</div>
<h2 class="text-2xl font-bold text-green-400 text-center uppercase tracking-wide mb-2">Ava Lux</h2>
<p class="text-sm text-green-200 text-center mb-4">Product Lead at CyberCorp Solutions</p>
<div class="grid grid-cols-2 gap-2 text-center text-green-300 text-sm">
<div>
<span class="block font-bold text-green-400">1.2k</span>
<span class="block">Followers</span>
</div>
<div>
<span class="block font-bold text-green-400">987</span>
<span class="block">Following</span>
</div>
</div>
<div class="mt-4 text-xs text-center text-gray-400 border-t border-green-800 pt-3 flex items-center justify-center">
<svg class="w-4 h-4 mr-1 text-green-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
</svg>
Neo-Tokyo, Block 7
</div>
</div>
<!-- Profile Card End -->
<!-- Follow Button -->
<button class="relative w-full py-3 px-6 text-xl font-bold text-black uppercase bg-green-400 rounded-lg overflow-hidden group shadow-lg shadow-green-500/50 transform transition duration-300 ease-in-out hover:scale-105 active:scale-95 button-glow-green">
<span class="relative z-10">+ Follow</span>
<div class="absolute inset-0 bg-green-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="absolute inset-0 border-2 border-green-600 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="absolute top-1/2 left-1/2 w-4 h-4 bg-green-200 rounded-full blur-sm opacity-0 group-hover:opacity-100 group-hover:animate-ping-small origin-center transition-all duration-500"></div>
</button>
<!-- Message & Options Buttons -->
<div class="grid grid-cols-2 gap-4 w-full">
<button class="relative py-3 px-4 text-lg font-bold text-green-300 uppercase bg-gray-800 dark:bg-gray-900 rounded-lg border border-green-700 overflow-hidden group shadow-md shadow-gray-700/50 hover:border-green-400 hover:text-green-200 transition duration-300 ease-in-out button-hover-glitch">
<span class="relative z-10">Message</span>
</button>
<button class="relative py-3 px-4 text-lg font-bold text-green-300 uppercase bg-gray-800 dark:bg-gray-900 rounded-lg border border-green-700 overflow-hidden group shadow-md shadow-gray-700/50 hover:border-green-400 hover:text-green-200 transition duration-300 ease-in-out button-hover-glitch">
<span class="relative z-10">Profile</span>
</button>
</div>
<!-- Status / Connection Indicator -->
<div class="flex items-center text-sm text-green-400 mt-4">
<span class="relative flex h-3 w-3 mr-2">
<span class="animate-ping-slow absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-green-600"></span>
</span>
<span>Active Connection // Online</span>
</div>
</div>
<!-- Bottom UI Elements / Accent Lines -->
<div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-1/2 h-1 bg-green-600 rounded-full shadow-neon-green blur-[1px] opacity-70"></div>
<div class="absolute top-0 left-0 w-4 h-4 border-l-2 border-t-2 border-green-500 rounded-tl-lg opacity-50"></div>
<div class="absolute top-0 right-0 w-4 h-4 border-r-2 border-t-2 border-green-500 rounded-tr-lg opacity-50"></div>
<div class="absolute bottom-0 left-0 w-4 h-4 border-l-2 border-b-2 border-green-500 rounded-bl-lg opacity-50"></div>
<div class="absolute bottom-0 right-0 w-4 h-4 border-r-2 border-b-2 border-green-500 rounded-br-lg opacity-50"></div>
</div>
</div>
<style>
/* Base styles for dark mode */
:root {
--tw-shadow-neon-green: 0 0px 10px rgba(50, 205, 50, 0.5), 0 0 20px rgba(50, 205, 50, 0.3), 0 0 30px rgba(50, 205, 50, 0.2);
--tw-shadow-inner-neon: inset 0 0 5px rgba(50, 205, 50, 0.4), inset 0 0 10px rgba(50, 205, 50, 0.2);
--color-green-neon: #32CD32; /* LimeGreen */
--color-green-dark: #1A4d2e; /* Darker Green */
}
/* Tailwind specific overrides for custom patterns */
.bg-grid-pattern-small {
background-image: linear-gradient(to right, rgba(50,205,50,0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(50,205,50,0.1) 1px, transparent 1px);
background-size: 20px 20px;
}
.bg-grid-pattern-large {
background-image: linear-gradient(to right, rgba(50,205,50,0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(50,205,50,0.1) 1px, transparent 1px);
background-size: 40px 40px;
}
.bg-dots-pattern {
background-image: radial-gradient(circle, rgba(50,205,50,0.2) 1px, transparent 1px);
background-size: 10px 10px;
}
/* Custom shadow utilities */
.shadow-neon-green {
box-shadow: var(--tw-shadow-neon-green);
}
.shadow-inner-neon {
box-shadow: var(--tw-shadow-inner-neon);
}
/* Keyframes for animations */
@keyframes pulse-slow {
0%, 100% { opacity: 0.1; }
50% { opacity: 0.2; }
}
@keyframes pulse-fast {
0%, 100% { opacity: 0.5; }
50% { opacity: 0.7; }
}
@keyframes ping-small {
0% { transform: scale(0); opacity: 0; }
50% { transform: scale(1); opacity: 0.8; }
100% { transform: scale(1.5); opacity: 0; }
}
@keyframes glitch {
0% { transform: translate(0, 0); opacity: 0.3; }
20% { transform: translate(-2px, 2px); opacity: 0.6; }
40% { transform: translate(-2px, -2px); opacity: 0.4; }
60% { transform: translate(2px, 2px); opacity: 0.7; }
80% { transform: translate(2px, -2px); opacity: 0.5; }
100% { transform: translate(0, 0); opacity: 0.3; }
}
/* Apply animations */
.animate-pulse-slow {
animation: pulse-slow 8s infinite ease-in-out;
}
.animate-pulse-fast {
animation: pulse-fast 2s infinite ease-in-out;
}
.animate-ping-small {
animation: ping-small 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.animate-glitch {
animation: glitch 0.5s infinite alternate;
}
/* Button Glitch Effect for hovers */
.button-hover-glitch:hover::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, transparent 49%, var(--color-green-neon) 50%, transparent 51%);
background-size: 200% 100%;
animation: glitch-line 0.3s steps(1) infinite alternate;
opacity: 0.2;
}
.button-hover-glitch:hover::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, transparent 49%, var(--color-green-neon) 50%, transparent 51%);
background-size: 200% 100%;
animation: glitch-line 0.3s steps(1) infinite reverse alternate;
opacity: 0.2;
}
@keyframes glitch-line {
0% { background-position: 0 0; }
100% { background-position: -200% 0; }
}
/* Button Glow Effect */
.button-glow-green {
position: relative;
overflow: hidden;
z-index: 1;
transition: all 0.3s ease;
}
.button-glow-green::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at center, rgba(50,205,50,0.6) 0%, transparent 70%);
animation: rotate-glow 4s linear infinite;
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
.button-glow-green:hover::before {
opacity: 1;
}
@keyframes rotate-glow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Dark mode specific styles */
.dark .bg-gradient-to-br.from-gray-800.to-gray-950 {
background-image: linear-gradient(to bottom right, #0a0a0a, #000000);
}
.dark .shadow-neon-green {
box-shadow: 0 0px 10px rgba(0, 255, 0, 0.7), 0 0 20px rgba(0, 255, 0, 0.5), 0 0 30px rgba(0, 255, 0, 0.3);
}
.dark .shadow-inner-neon {
box-shadow: inset 0 0 5px rgba(0, 255, 0, 0.5), inset 0 0 10px rgba(0, 255, 0, 0.3);
}
.dark .text-green-400 {
color: #00FF00; /* Brighter green for dark mode */
}
.dark .border-green-700,
.dark .border-green-800 {
border-color: #008f00;
}
.dark .bg-green-400 {
background-color: #00e600;
}
</style>関連コンポーネント
Follow Button コンポーネント
マテリアルデザインスタイルでデザインされたレスポンシブなフォローボタンコンポーネントで、Tailwind CSSを使用したダークモードをサポートしています。
3D-Vibrant-フォローボタン
ビジネスWebサイト向けの鮮やかな色を備えたシンプルな3Dインスパイアされたフォローボタンコンポーネント。レスポンシブで、HTML と Tailwind CSS のみを使用したダーク テーマのサポートが含まれています。
Follow Button コンポーネント
ガラスモルフィズム効果で設計された複雑なフォローボタンコンポーネントで、補色スキームを使用し、eコマースアプリケーションに適しており、レスポンシブデザインとダークテーマのサポートを特徴としています。