تغيير شكل ازرار مدونات بلوجر بطريقة الهوفر
السلام عليكم، درس اليوم عن شيء مهم اخصل للمدونات التي تستخدم قوالب عادية مجانية
حيث انها لاتتوفر بأزرار خاصة بها واي موقع وبأي مجال يأتي يوم وتضطر لوضع رابط
تحميل او ذهاب لرابط خارجي وانت لن تضع رابط وسط الكلام شيء عادي جدا وممل فلهذا
ينصح بإضافة زر للموضوع وبالخصوص ان كان الزر جميل وان كان العكس تواضع فقط
(🤣🤣).
شكل وطريقة اضافة شكل للأزرار
:اختر مدونتك ثم اذهب الى قسم المظهر ثم تعديل HTML
ابحث عن </style> ثم ضع الكود التالي فوقه
.button {position:center;padding:12px 15px; font-size:14px; border-radius: 5px; box-shadow: 0.3rem 0.3rem 0.6rem #c8d0e7, -0.2rem -0.2rem 0.5rem #ffffff; justify-content: center; cursor: pointer; transition: 0.3s ease; color: #9baacf; background: #E4EBF5; border: 0px;font-family: 'Noto Sans', sans-serif}
.button:hover {color: #6d5dfc}
.button:active {box-shadow: inset 0.2rem 0.2rem 0.5rem #c8d0e7, inset -0.2rem -0.2rem 0.5rem #ffffff}
.button .icon {left: -5px !important; position: relative !important}
.drkM .button { background: var(--darkBalt) !important; color: #3e3e3e; box-shadow:inset -2px -2px 5px rgba(0,0,0,.5), inset 3px 3px 5px rgba(255,255,255,.07) }
.drkM .button:hover { box-shadow: -2px -2px 5px rgba(0,0,0,.5), 3px 3px 5px rgba(255,255,255,.07); color: #fff }
.drkM .button:active { box-shadow: -2px -2px 5px rgba(0,0,0,.5), 3px 3px 5px rgba(255,255,255,.07); color: #fff; text-shadow: 0 0 10px, 0 0 20px #219cf3}الٱن في كل موضوع تريد اضافة فيه رابط استخدم التالي
<a class='button' href='#######'>Neumorphism Button</a>والى هنا ننتهي من درس اليوم الى اللقاء.
akram lam
just writer and ui&ux designer and web devolper
