تصميم أزرار بتأثيرات تدرج لوني مذهلة باستخدام CSS

تصميم أزرار بتأثيرات تدرج لوني مذهلة باستخدام CSS

في عالم تصميم الويب، تعتبر الأزرار من العناصر الأساسية التي تجذب انتباه المستخدمين وتشجعهم على التفاعل مع المحتوى. في هذا المقال، سنتعرف على كيفية إنشاء أزرار بتأثيرات تدرج لوني مذهلة باستخدام CSS فقط. هذه الأزرار تتميز بتصميم عصري وتفاعلي يجعلها تبرز في أي موقع ويب.

شرح الكود:

الهيكل العام:

<div class="kacompos-dakucels">: هذه الحاوية تحتوي على مجموعة من الأزرار. تم تنسيقها لتكون في وسط الصفحة مع هوامش (margin: 10%) ونص مركزي (text-align: center).

تصميم الأزرار:

<button class="constructos-knopok">: كل زر يحتوي على الفئة constructos-knopok التي تحدد التصميم العام للأزرار.

• العرض والارتفاع: width: 200px; height: 55px.
• الخط: font-size: 16px; font-weight: 600; color: #fff.
• الحدود: border: none; border-radius: 50px (حواف مدورة).
• الخلفية: استخدام تدرجات لونية (background-image: linear-gradient) مع تأثيرات ظل (box-shadow).
• التحولات: transition: all .4s ease-in-out لإضافة تأثير سلس عند التمرير فوق الزر.

تأثيرات التمرير (hover):

عند التمرير فوق الزر، يتم تغيير موضع الخلفية (background-position: 100% 0) لإعطاء تأثير حركي.

التدرجات اللونية:

تم استخدام تدرجات لونية مختلفة لكل زر، مثل:

• bordovum: تدرج من الأزرق إلى الأخضر.
• vishnevbo: تدرج من الأصفر إلى الأحمر.
• zelenyvis: تدرج من الأزرق إلى البنفسجي.
• nyvistsve: تدرج من الأحمر إلى البرتقالي.
• klubnicus: تدرج من الأخضر إلى الأزرق.
• cusoranev: تدرج من الأخضر إلى الأصفر.
• saturateden: تدرج من البنفسجي إلى الأحمر.
• adenscarlub: تدرج من الرمادي إلى الأزرق.
• ubgreken: تدرج من الأزرق الفاتح إلى الأزرق الداكن.
• nexperienced: تدرج من الوردي إلى البرتقالي.
• suckingncu: تدرج من الأحمر الفاتح إلى الأحمر الداكن.

فوائد الكود:

• تصميم جذاب: الأزرار تتميز بتدرجات لونية وظلال تجعلها تبرز في أي موقع.
• تفاعلية: تأثيرات التمرير تضيف تجربة مستخدم ممتعة.
• سهولة التخصيص: يمكن تغيير الألوان والأحجام بسهولة لتناسب أي تصميم.

كيفية الاستخدام:

إضافة الكود إلى موقعك:

1. قم بنسخ الكود الموجود في المقال.

2. الصقه في ملف CSS الخاص بك لإضافة الأنماط.

   
   .kacompos-dakucels {
     margin: 10%;
     text-align: center;
   }
   
   .constructos-knopok {
     width: 200px;
     font-size: 16px;
     font-weight: 600;
     color: #fff;
     cursor: pointer;
     margin: 20px;
     height: 55px;
     text-align:center;
     border: none;
     background-size: 300% 100%;
   
     border-radius: 50px;
     moz-transition: all .4s ease-in-out;
     -o-transition: all .4s ease-in-out;
     -webkit-transition: all .4s ease-in-out;
     transition: all .4s ease-in-out;
   }
   
   .constructos-knopok:hover {
     background-position: 100% 0;
     moz-transition: all .4s ease-in-out;
     -o-transition: all .4s ease-in-out;
     -webkit-transition: all .4s ease-in-out;
     transition: all .4s ease-in-out;
   }
   
   .constructos-knopok:focus {
     outline: none;
   }
   
   .constructos-knopok.bordovum {
     background-image: linear-gradient(to right, #179bd2, #32de8b, #23d47f, #1cbf71);
     box-shadow: 0 4px 15px 0 rgba(28, 179, 173, 0.75);
   }
   .constructos-knopok.vishnevbo {
     background-image: linear-gradient(to right, #efc550, #d23f14, #ea6189, #d2561d);
     box-shadow: 0 4px 15px 0 rgba(199, 68, 23, 0.75);
   }
   .constructos-knopok.zelenyvis {
     background-image: linear-gradient(to right, #5369c7, #6d3aa0, #597cc5, #7b2abf);
     box-shadow: 0 4px 15px 0 rgba(97, 60, 148, 0.75);
   }
   .constructos-knopok.nyvistsve {
     background-image: linear-gradient(to right, #dc5367, #e48839, #ca8234, #c54b16);
     box-shadow: 0 4px 15px 0 rgba(230, 85, 91, 0.75);
   }
   .constructos-knopok.klubnicus {
     background-image: linear-gradient(to right, #128653, #2ba07b, #25bf75, #21ab68);
     box-shadow: 0 4px 15px 0 rgba(17, 156, 99, 0.75);
   }
   .constructos-knopok.cusoranev {
     background-image: linear-gradient(to right, #0f7f44, #d4c708, #14a4bd, #c9d00e);
     box-shadow: 0 4px 15px 0 rgba(73, 177, 44, 0.75);
   }
   .constructos-knopok.saturateden {
     background-image: linear-gradient(to right, #5548c1, #701c7b, #8986ea, #ea3433);
     box-shadow: 0 4px 15px 0 rgba(110, 38, 144, 0.75);
   }
   .constructos-knopok.adenscarlub {
     background-image: linear-gradient(to right, #232f3c, #3b4b5d, #205375, #43376b);
     box-shadow: 0 4px 15px 0 rgba(49, 62, 78, 0.75);
   }
   .constructos-knopok.ubgreken {
     background-image: linear-gradient(to right, #129cd6, #2f70e2, #11aee4, #3073d4);
     box-shadow: 0 4px 15px 0 rgba(48, 116, 220, 0.75);
   }
   .constructos-knopok.nexperienced {
     background-image: linear-gradient(to right, #d25687, #da6f47, #da145d , #de992c);
     box-shadow: 0 4px 15px 0 rgba(216, 98, 131, 0.75);
   }
   .constructos-knopok.suckingncu {
     background-image: linear-gradient(to right, #e62d35, #d64c51, #fb9598, #d42931);
     box-shadow: 0 5px 15px rgba(245, 146, 150, 0.4);
   }
       

3. أضف الأزرار إلى HTML باستخدام الفئات المناسبة.

   
   <div class="kacompos-dakucels">
     <button class="constructos-knopok bordovum">تحميل</button>
     <button class="constructos-knopok vishnevbo">تحميل</button>
     <button class="constructos-knopok zelenyvis">تحميل</button>
     <button class="constructos-knopok nyvistsve">تحميل</button>
     <button class="constructos-knopok klubnicus">تحميل</button>
     <button class="constructos-knopok cusoranev">تحميل</button>
     <button class="constructos-knopok saturateden">تحميل</button>
     <button class="constructos-knopok adenscarlub">تحميل</button>
     <button class="constructos-knopok ubgreken">تحميل</button>
     <button class="constructos-knopok nexperienced">تحميل</button>
     <button class="constructos-knopok suckingncu">تحميل</button>
   </div>
       

تخصيص الأزرار:

• يمكنك تغيير الألوان عن طريق تعديل التدرجات اللونية في CSS.
• يمكنك تغيير حجم الأزرار عن طريق تعديل width و height.

نصيحة أخيرة:

يمكنك استخدام هذه الأزرار في أقسام مختلفة من موقعك، مثل أزرار "تحميل"، "اشتراك"، أو "اتصل بنا". تأكد من أن الألوان تتناسب مع الهوية البصرية لموقعك.

بهذا الكود، يمكنك تحسين تجربة المستخدم وجعل موقعك أكثر جاذبية من خلال أزرار تفاعلية ومصممة بعناية.

معاينة الكود