كيفية إنشاء: زر على الصورة

تعلم كيفية إضافة زر إلى الصورة باستخدام CSS.

كيفية إضافة زر على الصورة

الخطوة الأولى - إضافة HTML:

<div class="container">
  <img src="img_snow.jpg" alt="ثلج">
  <button class="btn">زر</button>
</div>

الخطوة الثانية - إضافة CSS:

/* تحتاج إلى وحدة لتحديد موقع الزر. تعديل العرض حسب الحاجة */
.container {
  وضع: نسبي;
  عرض: 50%;
}
/* جعل الصورة تتلائم مع تصميم الاستجابة */
.container img {
  عرض: 100%;
  طول: تلقائي;
}
/* لتحديد أسلوب الزر ووضعه في منتصف المحتوى/الصورة */
.container .btn {
  وضع: مطلق;
  الاعلى: 50%;
  اليسار: 50%;
  تحويل: تحويل(-50%, -50%);
  -ms-تحويل: تحويل(-50%, -50%);
  لون-الخلفية: #555;
  لون: white;
  حجم-الخط: 16px;
  ملء: 12px 24px;
  حلقة: none;
  سؤال-النقطة: pointer;
  حجم-الانحناء: 5px;
}
.container .btn:hover {
  background-color: black;
}

تجربة بنفسك