ساخت دکمه نئونی متحرک فقط با HTML و CSS (بدون جاوااسکریپت)
اگر دنبال راهی هستی که فقط با HTML و CSS یه دکمه چشم‌گیر و حرفه‌ای طراحی کنی، این آموزش مخصوص توئه.
در این مقاله یاد می‌گیری چطور با استفاده از conic-gradient و انیمیشن CSS، یک دکمه نئونی متحرک بسازی که توجه هر کاربری رو جلب می‌کنه – بدون حتی یک خط JavaScript!
کد HTML + CSS کامل
در ادامه کد کامل رو گذاشتم ، میتونی همین کد رو داخل برنامه ات استفاده کنی. توضیحات کاملش هم پایین تر گفتم.
<!DOCTYPE html>
<html>
<head>
<style>
.glow-button {
position: relative;
padding: 14px 32px;
border: none;
background: #111;
color: #fff;
font-size: 18px;
border-radius: 10px;
cursor: pointer;
overflow: hidden;
z-index: 0;
}
.glow-button::before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(from 0deg, #00f, #0ff, #0f0, #ff0, #f00, #f0f, #00f);
animation: rotate 3s linear infinite;
z-index: -2;
}
.glow-button::after {
content: "";
position: absolute;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
background: #111;
border-radius: 6px;
z-index: -1;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body style="margin-top:300px;margin-left:250px">
<button class="glow-button">Click Me</button>
</body>
</html>
توضیح مراحل ساخت دکمه
1. ظاهر دکمه (کلاس .glow-button)
ما با یک پس‌زمینه تیره و متنی سفید کار رو شروع کردیم. گوشه‌های گرد، padding مناسب و بدون هیچ حاشیه ظاهری.
2. افکت نئونی متحرک با ::before
با conic-gradient یک حلقه رنگارنگ ایجاد کردیم و به‌کمک animation چرخشش دادیم تا یک افکت متحرک نئونی بسازیم.
3. ساخت بک‌گراند داخلی با ::after
یک لایه داخلی (زیر دکمه) قرار دادیم که ظاهر دکمه رو تمیز و واضح نگه‌داره، و افکت پشتش بدرخشه.
4. انیمیشن با @keyframes
تنها انیمیشن ما یک چرخش 360 درجه‌ای مداومه که حس داینامیک و حرکت به دکمه می‌ده.
پیش‌نمایش نهایی
دکمه نهایی یک دکمه مشکی ساده با افکت نئونی رنگارنگ در حاشیه است که به‌آرامی در حال چرخشه.
کاملاً ریسپانسیو، بدون نیاز به جاوااسکریپت و مناسب برای استفاده در فرم‌ها، صفحات فرود و…
نکات پایانی
-
میتونی این افکت رو با رنگ‌های دلخواهت شخصی‌سازی کنی.
-
مدت زمان انیمیشن یا ضخامت افکت رو هم میتونی با تغییر اندازه
paddingو::afterو::beforeتنظیم کنی.
اگر سوالی داری توی کامنت های همین مقاله با ما در ارتباط باش.
دیدگاه خود را ثبت کنید
تمایل دارید در گفتگوها شرکت کنید؟در گفتگو ها شرکت کنید.