آخر الأخبار

استكشف في مدونة أوعي وشك عالم الابتكار

اكتشف الحلول المتطورة في تطبيقات الأجهزة المحمولة والتكنولوجيا والتعليم وموضوعات بلوجر. كن على اطلاع دائم بمقالات الخبراء والموارد الإبداعية والأدوات القوية لتعزيز مشاريعك الرقمية.

الصفحة الرئيسية
css
HTML

أفضل مجموعة من أزرار الإعجاب بــــ CSS اكثر من 20 كود

ستحصل على زر إعجاب متحرك يتغير لونه إلى الأزرق عند النقر عليه ويقوم بحركة اهتزازية صغيرة، مما يوفر تجربة مستخدم تفاعلية وجذابة. يمكنك تعديل الألوان
wesam elngar
CSS Like Button 20+ Favorite Button Examples

كيفية إنشاء زر إعجاب متحرك باستخدام HTML وCSS

HTML

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

خطوة بخطوة لإنشاء زر إعجاب متحرك باستخدام CSS
الخطوة #1: إنشاء مشروع جديد

أول شيء سنفعله هو إنشاء مجلد يحتوي على جميع ملفات المشروع. أنشئ مجلدًا فارغًا على جهازك وأطلق عليه أي اسم تريده.

افتح Visual Studio Code أو أي محرر نصوص تفضله، وأنشئ ملفين (index.html، style.css) داخل المجلد الذي أنشأته لزر الإعجاب. في الخطوة التالية، سنبدأ بإنشاء الهيكل الأساسي لصفحة الويب.

الخطوة #2: إعداد الهيكل الأساسي

في هذه الخطوة، سنضيف كود HTML لإنشاء الهيكل الأساسي للمشروع.

<!DOCTYPE html>
<html lang="ar" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <title>زر إعجاب فيسبوك</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta https-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
    
  </body>
</html>

هذا هو الهيكل الأساسي لمعظم صفحات الويب التي تستخدم HTML.

أضف الكود التالي داخل وسم <body>:

<button id="like" onclick="liked()">
  <i class="fa fa-thumbs-up"></i>
  <span class="icon">إعجاب</span>
</button>
<script>
  function liked(){
    var element = document.getElementById("like");
    element.classList.toggle("liked");
  }
</script>
الخطوة #3: إضافة أنماط للفئات

في هذه الخطوة، سنضيف كود CSS لتنسيق عناصر HTML.

* {
  padding: 0;
  margin: 0;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #f2f4f6;
}
button {
  background: #fff;
  border: unset;
  outline: 0;
  font-size: 18px;
  cursor: pointer;
  color: #65676b;
  padding: 5px 10px;
}
button.liked {
  color: #0571ed;
}
button.liked i{
  animation: anim 0.5s ease-in-out;
  -webkit-animation: anim 0.5s ease-in-out;
}
@keyframes anim {
  100% {
    transform: rotate(-15deg) scale(1.3);
    -webkit-transform: rotate(-15deg) scale(1.3);
    -moz-transform: rotate(-15deg) scale(1.3);
    -ms-transform: rotate(-15deg) scale(1.3);
    -o-transform: rotate(-15deg) scale(1.3);
    filter: blur(0.5px);
    -webkit-filter: blur(0.5px);
  }
}
أفضل مجموعة من أزرار الإعجاب بــــ CSS
#1 SVG Like Button Animation
CSS Like Button 20+ Favorite Button Examples

SVG Like Button Animation، الذي تم تطويره بواسطة آدم ثومسون . بالإضافة إلى ذلك، يمكنك تخصيصه حسب رغبتك وحاجتك.

المؤلف: آدم ثومسون
تاريخ الإنشاء: 15 سبتمبر 2020
المكونات: HTML & CSS(SCSS)
رابط العرض: Source Code / Demo
الوسوم: SVG Like Button
#2 Paw Clap Animated Button
CSS Like Button 20+ Favorite Button Examples

Paw Clap Animated Button، الذي تم تطويره بواسطة Aaron Iker . بالإضافة إلى ذلك، يمكنك تخصيصه حسب رغبتك وحاجتك.

المؤلف: Aaron Iker
تاريخ الإنشاء: 8 نوفمبر 2019
المكونات: HTML, CSS(SCSS) & JS
رابط العرض: Source Code / Demo
الوسوم: Paw Clap Animated Button
#3 Confetti Like Button
CSS Like Button 20+ Favorite Button Examples

Confetti Like Button، الذي تم تطويره بواسطة Marco Biedermann . بالإضافة إلى ذلك، يمكنك تخصيصه حسب رغبتك وحاجتك.

المؤلف: Marco Biedermann
تاريخ الإنشاء: 29 أكتوبر 2021
المكونات: HTML, CSS(PostCSS) & JS
رابط العرض: Source Code / Demo
الوسوم: Confetti Like Button
#4 Simple Like Button
CSS Like Button 20+ Favorite Button Examples

Simple Like Button، الذي تم تطويره بواسطة Emil Andersson . بالإضافة إلى ذلك، يمكنك تخصيصه حسب رغبتك وحاجتك.

المؤلف: Emil Andersson
تاريخ الإنشاء: 25 نوفمبر 2016
المكونات: HTML, CSS & JS
رابط العرض: Source Code / Demo
الوسوم: Simple Like Button
#5 Interactive splat like button
CSS Like Button 20+ Favorite Button Examples

Interactive splat like button، الذي تم تطويره بواسطة Gowri Prasanth V M . بالإضافة إلى ذلك، يمكنك تخصيصه حسب رغبتك وحاجتك.

المؤلف: Gowri Prasanth V M
تاريخ الإنشاء: 12 أكتوبر 2016
المكونات: HTML, CSS & JS
رابط العرض: Source Code / Demo
الوسوم: Interactive splat like button
#6 Twitter Style Like button in HTML5/SVG & CSS3 Animations
CSS Like Button 20+ Favorite Button Examples

Twitter Style Like button in HTML5/SVG & CSS3 Animations، الذي تم تطويره بواسطة Robeen . بالإضافة إلى ذلك، يمكنك تخصيصه حسب رغبتك وحاجتك.

المؤلف: Robeen
تاريخ الإنشاء: 24 ديسمبر 2016
المكونات: HTML & CSS
رابط العرض: Source Code / Demo
الوسوم: Twitter Style Like button
#7 Heart button with animation
CSS Like Button 20+ Favorite Button Examples

Heart button with animation، الذي تم تطويره بواسطة Tamino Martinius . بالإضافة إلى ذلك، يمكنك تخصيصه حسب رغبتك وحاجتك.

المؤلف: Tamino Martinius
تاريخ الإنشاء: 31 يوليو 2020
المكونات: HTML, CSS (SCSS) & JS
رابط العرض: Source Code / Demo
الوسوم: Heart button with animation
#8 Beer Like Button With counter
CSS Like Button 20+ Favorite Button Examples

Beer Like Button With counter، الذي تم تطويره بواسطة Aaron Iker . بالإضافة إلى ذلك، يمكنك تخصيصه حسب رغبتك وحاجتك.

المؤلف: Aaron Iker
تاريخ الإنشاء: 25 نوفمبر 2016
المكونات: HTML, CSS & JS
رابط العرض: Source Code / Demo
الوسوم: Beer Like Button With counter
#9 Like Button with Pure CSS
CSS Like Button 20+ Favorite Button Examples

Like Button with Pure CSS، الذي تم تطويره بواسطة Jheison K. Moreno . يمكن أن يكون هذا الزر مفيدًا إذا كنت تبحث عن حل بسيط ومباشر بدون استخدام JavaScript.

المؤلف: Jheison K. Moreno
تاريخ الإنشاء: 10 يناير 2021
المكونات: HTML & CSS
رابط العرض: Source Code / Demo
الوسوم: Like Button, Pure CSS
#10 Like Button with CSS Animations
CSS Like Button 20+ Favorite Button Examples

Like Button with CSS Animations، الذي تم تطويره بواسطة Esteban . هذا الزر يحتوي على أنيميشن جذابة تجعل تجربة المستخدم أكثر تفاعلية.

المؤلف: Esteban
تاريخ الإنشاء: 20 فبراير 2020
المكونات: HTML & CSS
رابط العرض: Source Code / Demo
الوسوم: Like Button, CSS Animations
#11 Responsive Like Button
CSS Like Button 20+ Favorite Button Examples

Responsive Like Button، الذي تم تطويره بواسطة Jheison Moreno . هذا الزر منتصب ومتكيف مع جميع أنواع الشاشات، مما يجعله مثاليًا للإنترنت المتنقلة.

المؤلف: Jheison Moreno
تاريخ الإنشاء: 15 مارس 2021
المكونات: HTML & CSS
رابط العرض: Source Code / Demo
الوسوم: Like Button, Responsive
#12 Minimalist Like Button
CSS Like Button 20+ Favorite Button Examples

Minimalist Like Button، الذي تم تطويره بواسطة Esteban . هذا الزر بسيط وجذاب، يناسب أي تصميم ويقدم تجربة مستخدم سلسة.

المؤلف: Esteban
تاريخ الإنشاء: 5 أبريل 2020
المكونات: HTML & CSS
رابط العرض: Source Code / Demo
الوسوم: Like Button, Minimalist
#13 Hover Like Button
CSS Like Button 20+ Favorite Button Examples

Hover Like Button، الذي تم تطويره بواسطة Esteban . هذا الزر يوفر تفاعل مثير عند تحريك المؤشر فوقه، مما يجعل تجربة المستخدم أكثر جاذبية.

المؤلف: Esteban
تاريخ الإنشاء: 10 مايو 2020
المكونات: HTML & CSS
رابط العرض: Source Code / Demo
الوسوم: Like Button, Hover Effect
#14 Like Button with Icon
CSS Like Button 20+ Favorite Button Examples

Like Button with Icon، الذي تم تطويره بواسطة Esteban . هذا الزر يحتوي على أيقونة جذابة تجعله أكثر جذبًا للعيان.

المؤلف: Esteban
تاريخ الإنشاء: 15 يونيو 2020
المكونات: HTML & CSS
رابط العرض: Source Code / Demo
الوسوم: Like Button, Icon
#15 Like Button with Text
CSS Like Button 20+ Favorite Button Examples

Like Button with Text، الذي تم تطويره بواسطة Esteban . هذا الزر يحتوي على نص يشرح وظيفته، مما يجعله واضحًا ومفهومًا للمستخدمين.

المؤلف: Esteban
تاريخ الإنشاء: 20 يوليو 2020
HTML & CSS
رابط العرض: Source Code / Demo
الوسوم: Like Button, Text
#16 Like Button with Count
CSS Like Button 20+ Favorite Button Examples

Like Button with Count، الذي تم تطويره بواسطة Esteban . هذا الزر يظهر عدد الأعجابات، مما يجعل المستخدمين يدركون شعبيته.

المؤلف: Esteban
تاريخ الإنشاء: 25 أغسطس 2020
المكونات: HTML, CSS & JS
رابط العرض: Source Code / Demo
الوسوم: Like Button, Count
#17 Like Button with Sound
CSS Like Button 20+ Favorite Button Examples

Like Button with Sound، الذي تم تطويره بواسطة Esteban . هذا الزر يلعب صوتًا عند النقر عليه، مما يجعل التجربة أكثر تفاعلية.

المؤلف: Esteban
تاريخ الإنشاء: 30 سبتمبر 2020
المكونات: HTML, CSS & JS
رابط العرض: Source Code / Demo
الوسوم: Like Button, Sound
#18 Like Button with CSS Variables
CSS Like Button 20+ Favorite Button Examples

Like Button with CSS Variables، الذي تم تطويره بواسطة Esteban . هذا الزر يستخدم متغيرات CSS لتسهيل تغيير الألوان والأشكال بسهولة.

المؤلف: Esteban
تاريخ الإنشاء: 5 أكتوبر 2020
المكونات: HTML & CSS
رابط العرض: Source Code / Demo
الوسوم: Like Button, CSS Variables
#19 Like Button with Transition
CSS Like Button 20+ Favorite Button Examples

Like Button with Transition، الذي تم تطويره بواسطة Esteban . هذا الزر يحتوي على انتقالات سلسة تجعل التفاعل مع المستخدم أكثر جاذبية.

المؤلف: Esteban
تاريخ الإنشاء: 10 نوفمبر 2020
المكونات: HTML & CSS
رابط العرض: Source Code / Demo
الوسوم: Like Button, Transition
#20 Like Button with Sound
CSS Like Button 20+ Favorite Button Examples

Like Button with Sound الذي تم تطويره بواسطة Esteban . هذا الزر يحتوي على ظل يضيف عمقًا وتأثيرًا ثلاثي الأبعاد.

المؤلف: Esteban
تاريخ الإنشاء: 15 ديسمبر 2020
المكونات: HTML & CSS
رابط العرض: Source Code / Demo
الوسوم: Like Button, Sound
#21 Awesome Like Button Animation CodePen
CSS Like Button 20+ Favorite Button Examples

زر الإعجاب المتحرك الرائع على CodePen، والذي تم تطويره بواسطة Unleashed Design. بالإضافة إلى ذلك، يمكنك تخصيصه وفقًا لرغباتك واحتياجاتك.

المطور: Unleashed Design
تاريخ الإنشاء: 20 سبتمبر 2021
التقنيات المستخدمة: HTML، CSS(Sass) و JS
رابط التجربة: الكود المصدري / عرض تجريبي
التصنيفات: زر إعجاب رائع
الخلاصـــــة:

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

كيف كان المقال؟

لحظة من فضلك

نحن نتصفح الكثير من المواقع ونجلب لك المقالات التي تبحث عنها ونختصرها لك وهذه المقالات عند كتابتها ونشرها تاخذ مننا وقت وجهد وسهر كبير ونحن لا نطلب الكثير

لذلك نطلب منك تعليقا للمحتوي وطريقة نشره هل تعجبك ام لا نطلب منك الدعم ودعمك هو تعليقك لكي نستمر لذلك حبا وليس امر من فضلك اكتب تعليق

أفضل مجموعة من أزرار الإعجاب بــــ CSS اكثر من 20 كود

🌟 انتبه عزيزي أعضاء المجتمع! 🌟
نحن متحمسون لمشاركتك في مناقشاتنا الديناميكية. لضمان بيئة محترمة وشاملة للجميع، نطلب تعاونكم مع الإرشادات التالية:
1. احترام الخصوصية: يرجى عدم مشاركة معلومات حساسة أو شخصية في تعليقاتك.
2. انشر الإيجابية: نحن نتمسك بسياسة عدم التسامح مطلقًا مع خطاب الكراهية أو اللغة المسيئة. دعونا نحافظ على محادثاتنا محترمة وودية.
3. اللغة المفضلة: لا تتردد في التعبير عن نفسك باللغة الإنجليزية أو العربية. ستساعدنا هاتان اللغتان في الحفاظ على مناقشة واضحة ومتماسكة.
4. احترام التنوع: لتعزيز جو شامل، نطلب منك بكل احترام تجنب مناقشة المسائل الدينية في تعليقاتك.
تذكر أن مساهماتك قيمة، ونحن نقدر التزامك بجعل مجتمعنا مكانًا ترحيبيًا للجميع. دعونا نواصل التعلم والنمو معًا من خلال المناقشات البناءة والاحترام المتبادل.
شكرًا لكونك جزءًا من مجتمعنا اوعي وشك! 🌟

إرسال تعليق