নিচের ভিআইপি বাটনগুলোতে ক্লিক করে আকর্ষণীয় বর্ডার ও বাটন সিএসএস কোডগুলো দেখুন, কপি করুন এবং রান করে পরীক্ষা করুন।
মাল্টি-কালার লিনিয়ার গ্রেডিয়েন্ট বর্ডার কোড
.login-card {
width: 320px;
background: #ffffff;
border: 4px solid transparent;
border-radius: 24px;
padding: 25px 20px;
text-align: center;
position: relative;
background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(90deg, #00f3ff, #ffd700, #00ff88, #ff0000, #000000, #ffffff, #00f3ff);
background-origin: border-box;
background-clip: padding-box, border-box;
background-size: 100% 100%, 400% 100%;
animation: moveBorderColors 4s linear infinite;
box-shadow: none;
}
@keyframes moveBorderColors {
0% { background-position: 0% 0%, 0% 0%; }
100% { background-position: 0% 0%, 100% 0%; }
}
লাইভ প্রিভিউ (Live Preview)
লিনিয়ার গ্রেডিয়েন্ট বর্ডার অ্যানিমেশন চলছে।
কনিক গ্রেডিয়েন্ট বর্ডার বিম রোটেট কোড
.login-card {
width: 320px; background: #ffffff; border-radius: 24px; padding: 25px 20px; text-align: center; position: relative; z-index: 1; overflow: hidden; box-shadow: none;
}
.login-card::before {
content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(from 0deg, transparent 65%, #00f3ff 75%, #ffd700 82%, #00ff88 88%, #ff0000 94%, #ffffff 100%); animation: borderBeamRotate 3.5s linear infinite; z-index: -2;
}
.login-card::after {
content: ''; position: absolute; inset: 3.5px; background: #ffffff; border-radius: 21px; z-index: -1;
}
@keyframes borderBeamRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
লাইভ প্রিভিউ (Live Preview)
কনিক গ্রেডিয়েন্ট বর্ডার বিম রোটেট অ্যানিমেশন।
রেইনবো ওয়েভ গ্রেডিয়েন্ট বর্ডার কোড
.login-card {
width: 320px; background: #ffffff; border: 3px solid transparent; border-radius: 24px; padding: 25px 20px; text-align: center; position: relative; background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff, #ff0000); background-origin: border-box; background-clip: padding-box, border-box; background-size: 100% 100%, 300% 100%; animation: rainbowWave 4s ease-in-out infinite; box-shadow: none;
}
@keyframes rainbowWave {
0% { background-position: 0% 0%, 0% 50%; }
50% { background-position: 0% 0%, 100% 50%; }
100% { background-position: 0% 0%, 0% 50%; }
}
লাইভ প্রিভিউ (Live Preview)
রেইনবো ওয়েভ বর্ডার অ্যানিমেশন চলছে।
স্পেকট্রাম সাইক্লিং গ্রেডিয়েন্ট বর্ডার কোড
.login-card {
width: 320px; background: #ffffff; border: 3px solid transparent; border-radius: 24px; padding: 25px 20px; text-align: center; position: relative; background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(135deg, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff); background-origin: border-box; background-clip: padding-box, border-box; animation: spectrumCycling 4s linear infinite; box-shadow: none;
}
@keyframes spectrumCycling { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
লাইভ প্রিভিউ (Live Preview)
স্পেকট্রাম সাইক্লিং অ্যানিমেশন চলছে।
ব্রিদিং গ্লো বর্ডার কোড
.login-card {
width: 320px; background: #ffffff; border: 3px solid #00f3ff; border-radius: 24px; padding: 25px 20px; text-align: center; position: relative; animation: breathingGlow 3.5s ease-in-out infinite;
}
@keyframes breathingGlow {
0%, 100% { border-color: #00f3ff; box-shadow: 0 0 5px rgba(0, 243, 255, 0.3), inset 0 0 5px rgba(0, 243, 255, 0.1); }
33% { border-color: #ffd700; box-shadow: 0 0 22px rgba(255, 215, 0, 0.7), inset 0 0 8px rgba(255, 215, 0, 0.2); }
66% { border-color: #00ff88; box-shadow: 0 0 22px rgba(0, 255, 136, 0.7), inset 0 0 8px rgba(0, 255, 136, 0.2); }
}
লাইভ প্রিভিউ (Live Preview)
ব্রিদিং গ্লো অ্যানিমেশন চলছে।
পাল্স বর্ডার অ্যানিমেশন কোড
.login-card {
width: 320px; background: #ffffff; border: 3px solid #00f3ff; border-radius: 24px; padding: 25px 20px; text-align: center; position: relative; animation: pulseBorderAnim 3s infinite ease-in-out;
}
@keyframes pulseBorderAnim {
0%, 100% { border-color: #00f3ff; box-shadow: 0 0 0 0 rgba(0, 243, 255, 0.5), 0 0 15px rgba(0, 243, 255, 0.3); }
33% { border-color: #ffd700; box-shadow: 0 0 0 10px rgba(255, 215, 0, 0), 0 0 25px rgba(255, 215, 0, 0.5); }
66% { border-color: #00ff88; box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.5), 0 0 15px rgba(0, 255, 136, 0.3); }
}
লাইভ প্রিভিউ (Live Preview)
পাল্স বর্ডার অ্যানিমেশন চলছে।
নিয়ন গ্লো অ্যানিমেশন কোড
.login-card {
width: 320px; background: #ffffff; border: 3px solid #00f3ff; border-radius: 24px; padding: 25px 20px; text-align: center; position: relative; animation: neonGlowAnim 3.5s infinite alternate;
}
@keyframes neonGlowAnim {
0% { border-color: #00f3ff; box-shadow: 0 0 10px #00f3ff, 0 0 25px #00f3ff, inset 0 0 10px rgba(0, 243, 255, 0.2); }
33% { border-color: #ff007f; box-shadow: 0 0 10px #ff007f, 0 0 25px #ff007f, inset 0 0 10px rgba(255, 0, 127, 0.2); }
66% { border-color: #00ff66; box-shadow: 0 0 10px #00ff66, 0 0 25px #00ff66, inset 0 0 10px rgba(0, 255, 102, 0.2); }
100% { border-color: #9d00ff; box-shadow: 0 0 10px #9d00ff, 0 0 25px #9d00ff, inset 0 0 10px rgba(157, 0, 255, 0.2); }
}
লাইভ প্রিভিউ (Live Preview)
নিয়ন গ্লো অ্যানিমেশন চলছে।
সাইবারপাঙ্ক নিয়ন বর্ডার অ্যানিমেশন কোড
.login-card {
width: 320px; background: #ffffff; border: 3px solid #00f3ff; border-radius: 24px; padding: 25px 20px; text-align: center; position: relative; animation: cyberGlowAnim 3s infinite ease-in-out;
}
@keyframes cyberGlowAnim {
0%, 100% { border-color: #00f3ff; box-shadow: 0 0 10px #00f3ff, inset 0 0 10px rgba(0, 243, 255, 0.2); }
50% { border-color: #ff0055; box-shadow: 0 0 25px #ff0055, inset 0 0 15px rgba(255, 0, 85, 0.3); }
}
লাইভ প্রিভিউ (Live Preview)
সাইবারপাঙ্ক নিয়ন বর্ডার অ্যানিমেশন চলছে।
এলইডি চেইজ অ্যানিমেশন কোড
.login-card {
width: 320px; background: #ffffff; border-radius: 24px; padding: 25px 20px; text-align: center; position: relative; z-index: 1; overflow: hidden; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.login-card::before {
content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(from 0deg, #00f3ff 0deg, #00f3ff 20deg, transparent 20deg, transparent 35deg, #ffd700 35deg, #ffd700 55deg, transparent 55deg, transparent 70deg, #ff0055 70deg, #ff0055 90deg, transparent 90deg, transparent 105deg, #00ff88 105deg, #00ff88 125deg, transparent 125deg, transparent 360deg); animation: ledChaseAnim 2s linear infinite; z-index: -2;
}
.login-card::after {
content: ''; position: absolute; inset: 3px; background: #ffffff; border-radius: 21px; z-index: -1;
}
@keyframes ledChaseAnim { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
লাইভ প্রিভিউ (Live Preview)
এলইডি চেইজ অ্যানিমেশন চলছে।
লিকুইড গ্রেডিয়েন্ট অ্যানিমেশন কোড
.login-card {
width: 320px; background: #ffffff; border: 3px solid transparent; border-radius: 24px; padding: 25px 20px; text-align: center; position: relative; background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(135deg, #00f3ff, #7928ca, #ff0080, #ffb800, #00ff88, #00f3ff); background-origin: border-box; background-clip: padding-box, border-box; background-size: 100% 100%, 400% 400%; animation: liquidGradientAnim 6s ease infinite; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
@keyframes liquidGradientAnim {
0% { background-position: 0% 0%, 0% 50%; }
50% { background-position: 0% 0%, 100% 50%; }
100% { background-position: 0% 0%, 0% 50%; }
}
লাইভ প্রিভিউ (Live Preview)
লিকুইড গ্রেডিয়েন্ট অ্যানিমেশন চলছে।
মডার্ন ভিআইপি গ্রেডিয়েন্ট বাটন কোড
.login-btn-vip1 {
background: linear-gradient(135deg, #00f3ff 0%, #0085ff 50%, #7000ff 100%);
color: #ffffff;
font-family: 'Orbitron', sans-serif;
font-weight: 700;
font-size: 15px;
border: none;
border-radius: 50px;
padding: 14px 20px;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 4px 15px rgba(0, 243, 255, 0.4);
transition: all 0.3s ease;
}
.login-btn-vip1:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 243, 255, 0.6);
}
লাইভ প্রিভিউ (Live Preview)
প্রিমিয়াম গ্রীন এমারেল্ড ভিআইপি বাটন কোড
.login-btn-vip2 {
background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
color: #ffffff;
font-family: 'Orbitron', sans-serif;
font-weight: 600;
font-size: 15px;
border: none;
border-radius: 12px;
padding: 14px 20px;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
transition: all 0.3s ease;
}
.login-btn-vip2:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(16, 185, 129, 0.5);
}
লাইভ প্রিভিউ (Live Preview)
প্রিমিয়াম পিংক-পার্পল ভিআইপি বাটন কোড
.login-btn-vip3 {
background: linear-gradient(135deg, #ec4899 0%, #a855f7 50%, #6366f1 100%);
color: #ffffff;
font-family: 'Orbitron', sans-serif;
font-weight: 600;
font-size: 15px;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 14px;
padding: 14px 20px;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 8px 32px 0 rgba(236, 72, 153, 0.3);
transition: all 0.3s ease;
}
.login-btn-vip3:hover {
box-shadow: 0 8px 32px 0 rgba(236, 72, 153, 0.5);
transform: translateY(-2px);
}
লাইভ প্রিভিউ (Live Preview)
প্রিমিয়াম গোল্ডেন অ্যাম্বার ভিআইপি বাটন কোড
.login-btn-vip4 {
background: linear-gradient(135deg, #f59e0b 0%, #ef4444 50%, #8b5cf6 100%);
color: #ffffff;
font-family: 'Orbitron', sans-serif;
font-weight: 600;
font-size: 15px;
border: none;
border-radius: 14px;
padding: 14px 20px;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
transition: all 0.3s ease;
}
.login-btn-vip4:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6);
}
লাইভ প্রিভিউ (Live Preview)