أزرار CSS احترافية جاهزة (نسخ ولصق)

Snippet Pro 🚀

حول واجهة موقعك من "عادية" إلى "مبهرة" بلمسة واحدة. إليك 5 أزرار CSS جاهزة (نسخ ولصق) مصممة لتبهر زوارك وتزيد من تفاعلهم.

لماذا هذه الأكواد مختلفة؟

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

مكتبة أزرار كوداتي: انسخ، الصق، وابهر زوارك.

01

تأثير السائل المتفاعل (Liquid Fill)

HTML & CSS Liquid Fill Button

<!-- كود HTML -->
<button class="btn-liquid">
  <span>تفاعل معنا</span>
  <div class="liquid"></div>
</button>

/* كود CSS */
.btn-liquid {
  position: relative; padding: 18px 45px; display: inline-block;
  text-decoration: none; text-transform: uppercase;
  width: 200px; overflow: hidden; border-radius: 40px;
  border: none; cursor: pointer; background: #222;
}
.btn-liquid span {
  position: relative; color: #fff; font-weight: 900;
  letter-spacing: 2px; z-index: 1;
}
.btn-liquid .liquid {
  position: absolute; top: -80px; left: 0; width: 200px; height: 200px;
  background: #4973ff; box-shadow: inset 0 0 50px rgba(0,0,0,.5);
  transition: .5s;
}
.btn-liquid:hover .liquid { top: -120px; }
.btn-liquid .liquid:after, .btn-liquid .liquid:before {
  content: ''; position: absolute; width: 200%; height: 200%;
  top: 0; left: 50%; transform: translate(-50%, -75%);
}
.btn-liquid .liquid:before { 
  border-radius: 45%; background: rgba(20,20,20,1); 
  animation: animate 5s linear infinite; 
}
.btn-liquid .liquid:after { 
  border-radius: 40%; background: rgba(20,20,20,.5); 
  animation: animate 10s linear infinite; 
}
@keyframes animate { 
  0% { transform: translate(-50%, -75%) rotate(0deg); } 
  100% { transform: translate(-50%, -75%) rotate(360deg); } 
}

02

النيون المتوهج (Cyberpunk Neon)

HTML & CSS Cyberpunk Glitch Button

<!-- كود HTML -->
<button class="btn-cyber">CYBERPUNK</button>

/* كود CSS */
.btn-cyber {
  width: 220px; height: 60px; border: none; outline: none;
  color: #fff; background: #111; cursor: pointer;
  position: relative; z-index: 0; border-radius: 10px;
  user-select: none; font-weight: 900; letter-spacing: 2px;
}
.btn-cyber:before {
  content: "";
  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  position: absolute; top: -2px; left: -2px; background-size: 400%;
  z-index: -1; filter: blur(5px);
  width: calc(100% + 4px); height: calc(100% + 4px);
  animation: glowing-cyber 20s linear infinite; 
  transition: opacity 0.3s ease-in-out; border-radius: 10px;
}
@keyframes glowing-cyber {
  0% { background-position: 0 0; } 
  50% { background-position: 400% 0; } 
  100% { background-position: 0 0; }
}
.btn-cyber:after { 
  z-index: -1; content: ""; position: absolute; width: 100%; 
  height: 100%; background: #222; left: 0; top: 0; border-radius: 10px; 
}

03

الزر المغناطيسي (Neumorphic Style)

HTML & CSS Magnetic Hover Button

<!-- كود HTML -->
<button class="btn-magnetic">جرب الضغط!</button>

/* كود CSS */
.btn-magnetic {
  padding: 15px 40px; border: none; background: white;
  color: #111; font-weight: 900; border-radius: 15px; 
  font-size: 1.1rem; cursor: pointer; position: relative; 
  transition: 0.5s; box-shadow: 10px 10px 0 #111;
}
.btn-magnetic:hover { 
  transform: translate(-5px, -5px); 
  box-shadow: 15px 15px 0 #6366f1; 
}
.btn-magnetic:active { 
  transform: translate(5px, 5px); 
  box-shadow: 0 0 0 #111; 
}

04

وهج الزجاج (Glassmorphism Shine)

لمسة احترافية

HTML & CSS Glassmorphism Shine

<!-- كود HTML -->
<a href="#" class="btn-shine">لمسة احترافية</a>

/* كود CSS */
.btn-shine {
  position: relative; padding: 15px 45px; background: rgba(255,255,255,0.1);
  backdrop-filter: blur(15px); border: 1px solid rgba(255,255,255,0.2);
  color: #fff; font-weight: bold; font-size: 1.1rem;
  border-radius: 50px; overflow: hidden; text-decoration: none; transition: 0.5s;
  display: inline-block;
}
.btn-shine::before {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: 0.5s;
}
.btn-shine:hover::before { left: 100%; }
.btn-shine:hover { 
  background: rgba(255,255,255,0.2); 
  box-shadow: 0 0 20px rgba(255,255,255,0.2); 
  color: white; 
}

05

منظور ثلاثي الأبعاد (3D Perspective)

HTML & CSS 3D Perspective Button

<!-- كود HTML -->
<button class="btn-perspective">المنظور العميق</button>

/* كود CSS */
.btn-perspective {
  perspective: 1000px; padding: 15px 40px; border: none;
  background: #6366f1; color: white; font-weight: 900;
  border-radius: 10px; transform-style: preserve-3d; font-size: 1.1rem;
  transition: transform 0.5s; cursor: pointer; 
  box-shadow: 0 10px 20px rgba(99, 102, 241, 0.4);
}
.btn-perspective:hover { 
  transform: rotateY(20deg) rotateX(10deg); 
}

الأسئلة الأكثر شيوعاً (FAQ)

الأمر بسيط جداً! قم بنسخ كود الـ HTML وضعه في المكان الذي ترغب بظهور الزر فيه داخل صفحتك، ثم انسخ كود الـ CSS والصقه داخل ملف الأنماط الخاص بك (مثلاً style.css) أو داخل وسم <style> في ترويسة موقعك.

لا، تأثيرات CSS الحديثة (مثل الرسوم المتحركة والظلال) خفيفة جداً ومحسّنة للمتصفحات (Hardware Accelerated). استخدام CSS النقي لعمل هذه التأثيرات أسرع بكثير وأفضل لأداء الموقع من استخدام الجافا سكريبت أو الصور الثقيلة.

بالتأكيد. جميع الأزرار المقدمة في كوداتي تعتمد على وحدات قياس مرنة (مثل الـ Padding الداخلي) مما يجعلها تتمدد وتتقلص بشكل متجاوب مع شاشات الجوال. يمكنك أيضاً استخدام استعلامات الوسائط (Media Queries) لتغيير حجم الخط إذا لزم الأمر.

تعتمد هذه الأزرار على خصائص CSS3 المتقدمة. وهي مدعومة بالكامل في جميع المتصفحات الحديثة (مثل كروم، سفاري، وإيدج). بعض الخصائص مثل backdrop-filter (المستخدمة في تأثير الزجاج) مدعومة الآن في أكثر من 90% من الأجهزة العالمية.

يمكنك بسهولة البحث عن الأكواد السداسية للألوان (مثل #6366f1 أو background-color) داخل صندوق الـ CSS المعطى لكل زر، واستبدالها بالألوان الخاصة بموقعك.

---

كود واحد كفيل بتغيير هويتك!

أي كود ستستخدمه في مشروعك القادم؟

🚀 تم النسخ بنجاح!