أزرار زجاجية ساحرة: تفاعل أنيق مع تأثيرات ضوئية مبهرة

هذا الكود يُنشئ مجموعة من الأزرار بتصميمات زجاجية (Glass Buttons) مع تأثيرات تفاعلية عند التحويم (Hover). الأزرار مقسمة إلى نوعين: glass-btn و glass2-btn، ولكل نوع ألوان مختلفة (أحمر، أزرق، أخضر). سأشرح الكود بالتفصيل لكن شاهد الكود الاول:

معاينة

الهيكل العام (HTML):


      <div class="glass-wrap">
  <div class="text-center">
    <div class="glass-btn glass-btn-red">
      <a href="#url">معاينة</a>
    </div>
    <div class="glass-btn glass-btn-blue">
      <a href="#url">معاينة</a>
    </div>
    <div class="glass-btn glass-btn-green">
      <a href="#url">معاينة</a>
    </div>
  </div>
  <div class="text-center">
    <div class="glass2-btn glass-btn2-red">
      <a href="#url">معاينة</a>
    </div>
    <div class="glass2-btn glass-btn2-blue">
      <a href="#url">معاينة</a>
    </div>
    <div class="glass2-btn glass-btn2-green">
      <a href="#url">معاينة</a>
    </div>
  </div>
</div>

شرح الكود

glass-wrap: الحاوية الرئيسية التي تحتوي على جميع الأزرار.
text-center: يُستخدم لتوسيط الأزرار.
glass-btn و glass2-btn: فئتان تمثلان نوعين مختلفين من الأزرار.
glass-btn-red , glass-btn-blue , glass-btn-green فئات لتحديد لون الزر (أحمر، أزرق، أخضر).

تنسيق الحاوية الرئيسية (CSS):


    .glass-wrap {
  margin: 20px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  height: 460px;
  background-image: url(https://atuin.ru/demo/1280/fantasy-2.jpg);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-color: #337AB7;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.2);
  border: 6px solid #BFE2FF;
}

شرح الكود

display: flex: يجعل العناصر داخل الحاوية تظهر بشكل مرن.
background-image: يُضيف صورة خلفية للحاوية.
box-shadow: يُضيف ظلًا للحاوية.
border: يُضيف حدودًا للحاوية.

تنسيق الأزرار (glass-btn و glass2-btn):


    .glass-btn, .glass2-btn {
  position: relative;
  width: 220px;
  height: 50px;
  margin: 20px;
  display: inline-block;
  text-align: center;
}

شرح تنسيق عام للأزرار:

position: relative: يُستخدم لتحديد موقع العناصر الداخلية بالنسبة للزر.
width و height: تحديد حجم الزر.
margin: يُضيف مسافة بين الأزرار.

تنسيق الرابط داخل الزر:


    .glass-btn a, .glass2-btn a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3);
  border-radius: 30px;
  padding: 0 10px;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-size: 16px;
  z-index: 1;
  transition: 0.5s;
  backdrop-filter: blur(15px);
}

شرح الكود

background: rgba(255, 255, 255, 0.05): خلفية شبه شفافة.
box-shadow: يُضيف ظلًا للزر.
border-radius: يجعل حواف الزر دائرية.
backdrop-filter: blur(15px): يُضيف تأثير ضبابي (Blur) للزر.

تأثيرات التحويم (Hover Effects):
- تأثيرات عامة:
```
  .glass-btn:hover a, .glass2-btn:hover a {
  letter-spacing: 3px;
}
```
  شرح التاثير
  - عند التحويم على الزر، يزيد تباعد الحروف letter-spacing.
- تأثيرات خاصة بـ glass-btn:
```
    .glass-btn:hover:before, .glass-btn:hover:after {
  width: 80%;
  height: 50%;
  border-radius: 30px;
}
```
  شرح التاثير
  - :before و :after : عناصر وهمية تُستخدم لإنشاء تأثيرات إضافية.
  - عند التحويم، تتوسع هذه العناصر لتغطي جزءًا من الزر.
- تأثيرات خاصة بـ glass2-btn:
```
    .glass2-btn:hover:before {
  bottom: 0;
  height: 80%;
  width: 80%;
  border-radius: 30px;
}
```
  شرح التاثير
  - عند التحويم، يتوسع العنصر الوهمي :before ليملأ الزر.

الألوان والتأثيرات الضوئية:

لون أحمر:


.glass-btn-red a:after,
.glass-btn-red:before,
.glass-btn-red:after {
  background: #ff4747;
  box-shadow: 0 0 5px #ff4747, 0 0 15px #ff4747, 0 0 30px #ff4747, 0 0 60px #ff4747;
}

لون أزرق:


.glass-btn-blue a:after,
.glass-btn-blue:before,
.glass-btn-blue:after {
  background: #419cec;
  box-shadow: 0 0 5px #419cec, 0 0 15px #419cec, 0 0 30px #419cec, 0 0 60px #419cec;
}

لون أخضر:


.glass-btn-green a:after,
.glass-btn-green:before,
.glass-btn-green:after {
  background: #38ba35;
  box-shadow: 0 0 5px #38ba35, 0 0 15px #38ba35, 0 0 30px #38ba35, 0 0 60px #38ba35;
}

شرح الألوان:
- يتم تحديد لون الخلفية والتأثيرات الضوئية لكل زر بناءً على الفئة Class المحددة.

النتيجة النهائية:
- تظهر الأزرار بتصميم زجاجي مع تأثيرات ضوئية.
- عند التحويم على الزر، تظهر تأثيرات تفاعلية مثل توسيع العناصر الوهمية وزيادة تباعد الحروف.
- كل زر له لون مختلف (أحمر، أزرق، أخضر) مع تأثيرات ضوئية مميزة.
الكود كامل مع CSS ,Html

[HTML]
  <div class="glass-wrap">
<div class="text-center">	
<div class="glass-btn glass-btn-red">
	<a href="#url">معاينة</a>
</div>
<div class="glass-btn glass-btn-blue">
	<a href="#url">معاينة</a>
</div>
<div class="glass-btn glass-btn-green">
	<a href="#url">معاينة</a>
</div>
</div>
<div class="text-center">	
<div class="glass2-btn glass-btn2-red">
	<a href="#url">معاينة</a>
</div>
<div class="glass2-btn glass-btn2-blue">
	<a href="#url">معاينة</a>
</div>
<div class="glass2-btn glass-btn2-green">
	<a href="#url">معاينة</a>
</div>


</div>	
</div>

[CSS] 
.glass2-btn {
	position: relative;
	width: 220px;
	height: 50px;
	margin: 20px;
	display: inline-block;
	text-align: center;
}
.glass2-btn a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(255, 255, 255, 0.05);
	box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3);
	border-radius: 30px;
	padding: 0 10px;
	letter-spacing: 1px;
	text-decoration: none;
	text-transform: uppercase;
	overflow: hidden;
	color: #fff;
	font-family: "Roboto", sans-serif;
	font-weight: bold;
	font-size: 16px;
	z-index: 1;
	transition: 0.5s;
	backdrop-filter: blur(15px);
}
.glass2-btn:hover a {
	letter-spacing: 3px;
}
.glass2-btn a:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);
	transform: skewX(45deg) translate(0);
	transition: 0.5s;
	filter: blur(0px);
}
.glass2-btn:hover a:before {
	transform: skewX(45deg) translate(200px);
}
.glass2-btn a:after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 0;
	height: 0;
	transition: 0.5s;
	border-radius: 30px;
	z-index: -1;
}
.glass2-btn:hover a:after {
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.glass2-btn:before {
	content: "";
	position: absolute;
	left: 50%;
	transform: translatex(-50%);
	bottom: -5px;
	width: 30px;
	height: 10px;
	background: #f00;
	border-radius: 10px;
	transition: 0.5s;
	transition-delay: 0.5;
}
.glass2-btn:hover:before {
	bottom: 0;
	height: 80%;
	width: 80%;
	border-radius: 30px;
}
.glass2-btn.glass-btn2-red a:after,
.glass2-btn.glass-btn2-red:before {
	background: #ff4747;
	box-shadow: 0 0 5px #ff4747, 0 0 15px #ff4747, 0 0 30px #ff4747, 0 0 60px #ff4747;
}
.glass2-btn.glass-btn2-blue a:after,
.glass2-btn.glass-btn2-blue:before{
	background: #419cec;
	box-shadow: 0 0 5px #419cec, 0 0 15px #419cec, 0 0 30px #419cec, 0 0 60px #419cec;
}
.glass2-btn.glass-btn2-green a:after,
.glass2-btn.glass-btn2-green:before {
	background: #38ba35;
	box-shadow: 0 0 5px #38ba35, 0 0 15px #38ba35, 0 0 30px #38ba35, 0 0 60px #38ba35;
}

[css] 
.glass-btn {
	position: relative;
	width: 220px;
	height: 50px;
	margin: 20px;
	display: inline-block;
	text-align: center;
}
.glass-btn a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(255, 255, 255, 0.05);
	box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3);
	border-radius: 30px;
	padding: 0 10px;
	letter-spacing: 1px;
	text-decoration: none;
	text-transform: uppercase;
	overflow: hidden;
	color: #fff;
	font-family: "Roboto", sans-serif;
	font-weight: bold;
	font-size: 16px;
	z-index: 1;
	transition: 0.5s;
	backdrop-filter: blur(15px);
}
.glass-btn:hover a {
	letter-spacing: 3px;
}
.glass-btn a:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);
	transform: skewX(45deg) translate(0);
	transition: 0.5s;
	filter: blur(0px);
}
.glass-btn:hover a:before {
	transform: skewX(45deg) translate(200px);
}
.glass-btn a:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	transition: 0.5s;
	border-radius: 30px;
	z-index: -1;
}
.glass-btn:hover a:after {
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.glass-btn:before {
	content: "";
	position: absolute;
	left: 50%;
	transform: translatex(-50%);
	bottom: -5px;
	width: 30px;
	height: 10px;
	background: #f00;
	border-radius: 10px;
	transition: 0.5s;
	transition-delay: 0.5;
}
.glass-btn:hover:before {
	bottom: 0;
	height: 50%;
	width: 80%;
	border-radius: 30px;
}
.glass-btn:after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translatex(-50%);
	top: -5px;
	width: 30px;
	height: 10px;
	background: #f00;
	border-radius: 10px;
	transition: 0.5s;
	transition-delay: 0.5;
}
.glass-btn:hover:after {
	top: 0;
	height: 50%;
	width: 80%;
	border-radius: 30px;
}
.glass-btn.glass-btn-red a:after,
.glass-btn.glass-btn-red:before,
.glass-btn.glass-btn-red:after {
	background: #ff4747;
	box-shadow: 0 0 5px #ff4747, 0 0 15px #ff4747, 0 0 30px #ff4747, 0 0 60px #ff4747;
}
.glass-btn.glass-btn-blue a:after,
.glass-btn.glass-btn-blue:before,
.glass-btn.glass-btn-blue:after {
	background: #419cec;
	box-shadow: 0 0 5px #419cec, 0 0 15px #419cec, 0 0 30px #419cec, 0 0 60px #419cec;
}
.glass-btn.glass-btn-green a:after,
.glass-btn.glass-btn-green:before,
.glass-btn.glass-btn-green:after {
	background: #38ba35;
	box-shadow: 0 0 5px #38ba35, 0 0 15px #38ba35, 0 0 30px #38ba35, 0 0 60px #38ba35;
}

اوعي وشك

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

أزرار زجاجية ساحرة: تفاعل أنيق مع تأثيرات ضوئية مبهرة

الهيكل العام (HTML):

تنسيق الحاوية الرئيسية (CSS):

تنسيق الأزرار (glass-btn و glass2-btn):

تأثيرات التحويم (Hover Effects):

الألوان والتأثيرات الضوئية:

إرسال تعليق

اذا كنت تبحث اوتبحثين عن عمل اضافي بجانب عملك مقابل مادي اتصل بنا

الدردشة وتساب

إرسال طلب

شرح خاصية background-image مع استخدام عدة صور خلفية

عمل أداة تحويل الأكواد إلى تنسيق آمن باستخدامHTML وCss

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

Media Queries الأدوات التي تجعل موقعك يعمل بسلاسة على أي جهاز

تصميم ثلاثي الأعمدة السر وراء المحتوى المنظم والجذاب

اوعي وشك

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