دکمه نئون CSS — نمونه‌های درخشان با کد آماده
استایل نئون با ترکیب حاشیه رنگی، سایه درخشان (box-shadow) و رنگ متن نئونی ساخته می‌شود. در این مجموعه، دکمه‌های نئون آبی، سبز و بنفش را با حالت دارک آماده کرده‌ایم که با یک کلیک قابل کپی هستند.
برای بهترین نتیجه، این دکمه‌ها را روی پس‌زمینه تیره استفاده کنید تا افکت درخشش کامل دیده شود.
۹ کد آماده برای «دکمه نئون css»
پیش‌نمایش زنده
دکمه‌ها
دکمه هاله نئونی بنفش
دکمه
نئون
هاور
۴۵
۴.۷ (۷)
پیش‌نمایش زنده
سوییچ‌ها
سوییچ مربعی نئون
سوییچ
نئون
مربعی
۳۷
۴.۷ (۶)
شب‌های فیروزه‌ای
متن نئون شبانه
متن
نئون
درخشش
۳۷
۴.۷ (۶)
پیش‌نمایش زنده
دکمه‌ها
دکمه نئون سبز
نئون
دکمه
سبز
۳۲
۴.۶ (۵)
پیش‌نمایش زنده
دکمه‌ها
دکمه نئون پالس بنفش
دکمه
نئون
پالس
۳۲
۴.۶ (۵)
پیش‌نمایش زنده
دکمه‌ها
دکمه نئون درخشان
دکمه
نئون
درخشش
۸۰
۴.۶ (۱۲)
پیش‌نمایش زنده
دکمه‌ها
دکمه نئون آبی
نئون
دکمه
آبی
۵۲
۴.۵ (۸)
پیش‌نمایش زنده
سوییچ‌ها
سوییچ نئونی سایبری
سوییچ
نئون
سایبری
۱۵
۴.۴ (۳)
OPEN 24/7
متن نئون درخشان
متن
نئون
درخشش
۱۵
۴.۴ (۳)
سوالات متداول
افکت نئون در CSS چطور ساخته می‌شود؟
ترکیبی از box-shadow با رنگ شفاف و چند لایه سایه. مثال: box-shadow: 0 0 8px #22d3ee, 0 0 24px rgba(34,211,238,.8). در هاور شدت سایه را بیشتر کنید.
روی پس‌زمینه روشن هم جواب می‌دهد؟
افکت نئون روی پس‌زمینه روشن کم‌اثر است؛ پیشنهاد ما استفاده در هدرها و بخش‌های دارک است.