تأثيرات أزرار CSS الملونة عند التمرير
تم تصميم هذه الأزرار بشكل مميز بألوان زاهية وتأثيرات مضيئة تظهر عند التمرير فوقها باستخدام HTML وCSS. كما يمكن ملاحظة، هناك عنصران رئيسيان في هذا التصميم، كل منهما يأتي بتأثيرات فريدة. تتمثل هذه التأثيرات في ظهور خطوط ملونة على جوانب الزر عند النقر، حيث تتغير هذه الخطوط مع مرور الوقت، مما يجعلها تبدو رائعة على الخلفيات الداكنة.
يوجد هنا زر واحد مع تأثير نص يظهر عند التمرير، بالإضافة إلى دائرة تحميل بنفس النص التفاعلي. يمكن القول إن هذين العنصرين يعتبران أزرارًا مميزة يمكن تعديلها لتناسب أي نمط أو تنسيق. إذا كنت مبتدئًا ولديك معرفة أساسية بـ HTML وCSS، فلن يكون من الصعب تغيير الألوان لتتناسب مع تصميم موقعك. كل شيء مصمم بأناقة وباستخدام أنماط CSS بحتة، مما يجعل التصميم يبدو رائعًا.
هذا كل شيء، كما ترى، لا يوجد شيء معقد هنا، حيث يمكنك بسهولة إنشاء تأثيرات مضيئة ملونة ستزين موقعك وتظهر عند التمرير باستخدام HTML وCSS.
شرح كود أزرار بتأثيرات مضيئة وملونة
هذا الكود يعرض تصميمًا لأزرار بتأثيرات مضيئة وملونة تظهر عند التمرير فوقها. يتم استخدام HTML وCSS لإنشاء هذه التأثيرات، مع إمكانية تعديل الألوان والتصميم بسهولة. سنشرح هنا المكونات الرئيسية للكود وكيفية عمله.
المكونات الرئيسية:
- الهيكل العام: تم استخدام عنصر
<div>مع كلاسcenterلتجميع الأزرار في مكان واحد. - الأزرار: تم إنشاء زرين، أحدهما مستطيل الشكل والآخر دائري، مع إضافة تأثيرات مضيئة عند التمرير.
- التصميم: تم استخدام CSS لتنسيق الأزرار وإضافة تأثيرات التدرجات اللونية والحركة عند التمرير.
تفاصيل الكود:
- الهيكل الأساسي:
- تم تعيين خلفية الصفحة باستخدام
background: #000;. - تم توسيط الأزرار باستخدام
display: flex;وjustify-content: center;داخل.center.
- تم تعيين خلفية الصفحة باستخدام
- تصميم الأزرار:
- تم تعيين خصائص عامة للأزرار مثل
height،width، وborder-radiusلجعلها تبدو أنيقة. - تم استخدام
position: absolute;لتحديد موقع الأزرار والتأثيرات بشكل دقيق. - تم استخدام
background: #111;لتعيين خلفية الأزرار.
- تم تعيين خصائص عامة للأزرار مثل
- تأثيرات التمرير (hover):
- عند التمرير فوق الزر، يتم تغيير الخلفية باستخدام
linear-gradientلإنشاء تدرج لوني. - يتم تطبيق تأثير ضبابي (blur) على العناصر
spanباستخدامfilter: blur();. - يتم تطبيق تأثير تدوير الألوان باستخدام
@keyframes rotate.
- عند التمرير فوق الزر، يتم تغيير الخلفية باستخدام
- التصميم المتجاوب:
- تم استخدام
@mediaلجعل التصميم متجاوبًا مع الشاشات الصغيرة (أقل من 640px). - في الشاشات الصغيرة، يتم تغيير اتجاه الأزرار إلى عمودي باستخدام
flex-direction: column;.
- تم استخدام
الخصائص المستخدمة:
Flexbox:تم استخدامdisplay: flex;لتوسيط العناصر وتنظيمها.Transition:تم استخدامtransitionلإضافة تأثيرات سلسة عند التمرير.Linear Gradient:تم استخدامlinear-gradientلإنشاء التدرجات اللونية.Animation:تم استخدام@keyframesلإنشاء تأثيرات حركية.
الكود كاملا
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Gradient Color Effect | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="center">
<div class="outer button">
<button>aweywashk</button>
<span></span>
<span></span>
</div>
<div class="outer circle">
<button>aweywashk</button>
<span></span>
<span></span>
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
display: grid;
height: 100%;
place-items: center;
background: #000;
}
.center{
display: flex;
text-align: center;
align-items: center;
justify-content: center;
}
.outer{
position: relative;
margin: 0 50px;
background: #111;
}
.button{
height: 70px;
width: 220px;
border-radius: 50px;
}
.circle{
height: 200px;
width: 200px;
border-radius: 50%;
}
.outer button, .outer span{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.outer button{
background: #111;
color: #f2f2f2;
outline: none;
border: none;
font-size: 20px;
z-index: 9;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
}
.button button{
height: 60px;
width: 210px;
border-radius: 50px;
}
.circle button{
height: 180px;
width: 180px;
border-radius: 50%;
}
.outer span{
height: 100%;
width: 100%;
background: inherit;
}
.button span{
border-radius: 50px;
}
.circle span{
border-radius: 50%;
}
.outer:hover span:nth-child(1){
filter: blur(7px);
}
.outer:hover span:nth-child(2){
filter: blur(14px);
}
.outer:hover{
background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
animation: rotate 1.5s linear infinite;
}
@keyframes rotate {
0%{
filter: hue-rotate(0deg);
}
100%{
filter: hue-rotate(360deg);
}
}
@media (max-width: 640px){
.center{
flex-wrap: wrap;
flex-direction: column;
}
.outer{
margin: 50px 0;
}
}
معايــنة
هذا الكود يعتبر مثالًا رائعًا لإنشاء أزرار بتصميم عصري وجذاب باستخدام HTML وCSS. يمكن تعديل الألوان والتأثيرات بسهولة لتتناسب مع احتياجات التصميم.
