- بواسطة x32x01 ||
لو عايز تضيف لمسة احترافية وجذابة على موقعك، يمكنك عمل زر بأضاءة متحركة 
باستخدام HTML وCSS فقط، بدون أي مكتبات خارجية! هنتعلم خطوة بخطوة إزاي نعمل التأثير ده بطريقة بسيطة وسهلة. 
الفكرة الأساسية هي وجود عنصرين فوق بعض:
باستخدام HTML وCSS فقط، بدون أي مكتبات خارجية! هنتعلم خطوة بخطوة إزاي نعمل التأثير ده بطريقة بسيطة وسهلة. 
الهيكل الأساسي في HTML
الفكرة الأساسية هي وجود عنصرين فوق بعض:- العنصر الخلفي outline → يمثل الخط الأحمر المتحرك
- العنصر الأمامي inner-container → يغطي العنصر الخلفي مع ترك الأطراف مرئية
HTML:
<div class="btn-container">
<div class="outline"></div>
<div class="inner-container">Outlined</div>
</div>- btn-container هو الحاوية الأساسية للزر.
- outline هو العنصر الذي سيعمل عليه التحريك.
- inner-container هو العنصر الأمامي الذي يظهر النص ويغطي الخلفية.
إعداد CSS وترتيب العناصر
أ) ترتيب العناصر داخل الحاوية
CSS:
.btn-container {
min-height: 200px;
width: 200px;
position: relative;
overflow: hidden; /* اخفاء الجزء الخارج عن الحاوية */
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(18, 8, 41);
box-shadow: 5px 5px 10px rgba(255, 0, 0, 0.171);
border-radius: 25px;
}ب) العنصر الخلفي outline
- نضعه position: absolute ليصبح حر وغير تابع لتسلسل العناصر.
- نضبط الحجم أكبر من الحاوية لتظهر الحركة عند التدوير.
- نستخدم conic-gradient لإنشاء زاوية ملونة.
CSS:
.outline {
position: absolute;
background-image: conic-gradient(red 40deg, transparent 140deg);
height: 300%;
width: 300%;
animation-name: btn-outline;
animation-duration: 10s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}ج) العنصر الأمامي inner-container
CSS:
.inner-container {
position: absolute;
background-color: rgb(18, 8, 41);
height: 95%;
width: 95%;
color: rgba(255, 255, 255, 0.322);
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
font-family: 'Courier New', Courier, monospace;
border-radius: 25px;
transition: all 0.5s ease;
}
.inner-container:hover {
font-size: 35px;
color: rgba(255, 255, 255, 0.6);
}
تحريك العنصر الخلفي
- نستخدم @keyframes لتدوير outline 360 درجة بشكل مستمر
CSS:
@keyframes btn-outline {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
إعداد الصفحة بالكامل
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Button</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="btn-container">
<div class="outline"></div>
<div class="inner-container">Outlined</div>
</div>
</body>
</html>
نصائح احترافية
- جرب تغيير ألوان conic-gradient لإضفاء أشكال وإضاءات مختلفة
- يمكن تعديل مدة التحريك في animation-duration للحصول على سرعة مختلفة
- يمكنك إضافة تأثيرات CSS على inner-container:hover لتغيير اللون أو الحجم عند المرور بالماوس
التعديل الأخير: