أزرار بتدرج لوني سلس باستخدام hover

أزرار بتدرج لوني سلس باستخدام CSS

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

تم استخدام التدرجات الخطية (Linear Gradients) لكل زر، مما يعني أن كل زر يتمتع بتصميم فريد خاص به. تم تطبيق مجموعة متنوعة من الألوان على الأزرار، حيث قمنا باختيار 4 ألوان رئيسية ثم إضافة انتقالات سلسة بينها. هذه الانتقالات تظهر أيضًا عند النقر على الزر، ولكن مع تغيير في لوحة الألوان.

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

شرح كود أزرار بتدرجات لونية وتأثيرات hover

هذا الكود يعرض مجموعة من الأزرار التي تستخدم التدرجات اللونية (Gradients) وتأثيرات سلسة عند التمرير فوقها (hover). سنشرح هنا المكونات الرئيسية للكود وكيفية عمله.

المكونات الرئيسية:

• الهيكل العام: تم استخدام عنصر <div> مع كلاس container لتجميع الأزرار في مكان واحد.
• الأزرار: تم إنشاء 5 أزرار باستخدام عنصر <a> مع كلاس btn، وكل زر له تدرج لوني مختلف.
• التصميم: تم استخدام CSS لتنسيق الأزرار وإضافة تأثيرات التدرجات اللونية والحركة عند التمرير.

تفاصيل الكود:

• الهيكل الأساسي:
  • تم تعيين خلفية الصفحة باستخدام font-family: 'Montserrat', sans-serif; لجعل الخطوط أكثر جاذبية.
  • تم توسيط الأزرار باستخدام display: flex; وjustify-content: center; داخل .container.
• تصميم الأزرار:
  • تم تعيين خصائص عامة للأزرار مثل padding، text-align، وborder-radius لجعلها تبدو أنيقة.
  • تم استخدام transition: 0.5s; لإضافة تأثيرات سلسة عند التمرير.
  • تم تعيين background-size: 200% auto; لتمديد الخلفية عند التمرير.
• تأثيرات التمرير (hover):
  • عند التمرير فوق الزر، يتم تغيير اتجاه الخلفية باستخدام background-position: right center;.
  • كل زر له تدرج لوني مختلف باستخدام linear-gradient، مع تحديد اتجاه التدرج والألوان المستخدمة.
• الألوان والتدرجات:
  • .btn-1: يستخدم تدرجًا بين الأصفر والبرتقالي.
  • .btn-2: يستخدم تدرجًا بين الوردي والأزرق.
  • .btn-3: يستخدم تدرجًا بين الأخضر والأزرق.
  • .btn-4: يستخدم تدرجًا بين الأزرق الفاتح والأزرق السماوي.
  • .btn-5: يستخدم تدرجًا بين البيج والبرتقالي الفاتح.

الخصائص المستخدمة:

• Flexbox: تم استخدام display: flex; لتوسيط العناصر وتنظيمها.
• Transition: تم استخدام transition لإضافة تأثيرات سلسة عند التمرير.
• Linear Gradient: تم استخدام linear-gradient لإنشاء التدرجات اللونية.

هذا الكود يعتبر مثالًا رائعًا لإنشاء أزرار بتصميم عصري وجذاب باستخدام HTML وCSS. يمكن تعديل الألوان والتأثيرات بسهولة لتتناسب مع احتياجات التصميم.

الكود كاملا

hover

<div class="container">
  <a class="btn btn-1">Hover me</a>
  <a class="btn btn-2">Hover me</a>
  <a class="btn btn-3">Hover me</a> 
  <a class="btn btn-4">Hover me</a> 
  <a class="btn btn-5">Hover me</a>
</div>
    

hover

/* <- Demo Stuff Start */

body{
  font-family: 'Montserrat', sans-serif;
  margin:0;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  width: 80vw;
  margin: 0 auto;
  min-height: 100vh;
}
.btn {
  flex: 1 1 auto;
  margin: 10px;
  padding: 30px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
 /* text-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
 }

/* Demo Stuff End -> */

/* <- Magic Stuff Start */

.btn:hover {
  background-position: right center; /* change the direction of the change here */
}

.btn-1 {
  background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
}

.btn-2 {
  background-image: linear-gradient(to right, #fbc2eb 0%, #a6c1ee 51%, #fbc2eb 100%);
}

.btn-3 {
  background-image: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%, #84fab0 100%);
}

.btn-4 {
  background-image: linear-gradient(to right, #a1c4fd 0%, #c2e9fb 51%, #a1c4fd 100%);
}

.btn-5 {
  background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 51%, #ffecd2 100%);
}

/* Magic Stuff End -> */
    

معايــنة