- بواسطة x32x01 ||
لو عايز تضيف لمسة احترافية وجذابة على موقعك، يمكنك عمل زر بأضاءة متحركة ✨ باستخدام HTML وCSS فقط، بدون أي مكتبات خارجية! هنتعلم خطوة بخطوة إزاي نعمل التأثير ده بطريقة بسيطة وسهلة. 🚀
1️⃣ الهيكل الأساسي في 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 هو العنصر الأمامي الذي يظهر النص ويغطي الخلفية.
2️⃣ إعداد 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);
}3️⃣ تحريك العنصر الخلفي
- نستخدم @keyframes لتدوير outline 360 درجة بشكل مستمر 🔄
CSS:
@keyframes btn-outline {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}4️⃣ إعداد الصفحة بالكامل
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 لتغيير اللون أو الحجم عند المرور بالماوس
التعديل الأخير:
