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

<!-- كود 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); } }

<!-- كود 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; }

<!-- كود 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; }

<!-- كود 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; }

<!-- كود 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); }