الموضوع
اقرأ ايضًا
التعليقات
عن الكاتب
تعليمات
البساطة في الأزرار، زرين متشابكين مع بعضعهما يمكن إستخدامهما في عدة أمور تحميل أو معاينة أو تحميل مقسم وغير ذلك، يتضمنان كذلك تأثير الضغط يضيئ قليلا كما ستجربونه بأنفسكم في المعاينة التالية
شرح طريقة التركيب
1.ابحث عن ]]></b:skin> وضع الكود التالي فوقه أو ضعه بين <style> </style> فوق </head>
الإصدارات السابقة
أزرار بسيطة الإصدار الأول
أزرار بسيطة الإصدار الثاني
1.ابحث عن ]]></b:skin> وضع الكود التالي فوقه أو ضعه بين <style> </style> فوق </head>
.ui.button { cursor: pointer; display: inline-block; vertical-align: middle; min-height: 1em; outline: none; border: none; background-color: #F0F0F0; color: #808080; margin: 0em; padding: 0.8em 1.5em; font-family: droid arabic kufi; font-size: 1rem; text-transform: uppercase; line-height: 1; font-style: normal; text-align: center; text-decoration: none; border-radius: 0.25em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
user-select: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}
.ui.buttons .active.button,
.ui.active.button { background-color: #EAEAEA; background-image: none; -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important; box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important; color: rgba(0, 0, 0, 0.7);}
.ui.button:not(.loading):hover { background-image: -webkit-gradient(linear, top left, bottom left, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.08))); background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08)); background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08)); color: rgba(0, 0, 0, 0.7);}
.ui.button.active:hover { background-image: none;}
.ui.button:hover .icon,
.ui.button.hover .icon { opacity: 0.85;}
.ui.button:not(.loading):active,
.ui.active.button:not(.loading):active { background-color: #F1F1F1; color: rgba(0, 0, 0, 0.7); -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important; box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important;}
.ui.buttons .or { position: relative; float: left; width: 0.3em; height: 1.1em; z-index: 3;}
.ui.buttons .or:before { position: absolute; top: 50%; left: 50%; content: 'or'; background-color: #5a5a5a; margin-top: -0.1em; margin-left: -0.9em; width: 1.8em; height: 1.8em; line-height: 1.55; color: #fff; font-style: normal; font-weight: normal; text-align: center; border-radius: 500px; -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}
.ui.buttons .or:after { position: absolute; top: 0em; left: 0em; content: ' '; width: 0.3em; height: 1.7em; background-color: transparent; border-top: 0.5em solid #5a5a5a; border-bottom: 0.8em solid #5a5a5a;}
.ui.positive.buttons .button,
.ui.positive.button { background-color: #F9BB4A !important; color: #FFFFFF;}
.ui.positive.buttons .button:hover,
.ui.positive.button:hover,
.ui.positive.buttons .active.button,
.ui.positive.button.active { background-color: #F7A130 !important; color: #FFFFFF;}
.ui.positive.buttons .button:active,
.ui.positive.button:active { background-color: #FFBC64 !important; color: #FFFFFF;}
.ui.buttons { display: inline-block; vertical-align: middle;border-bottom: 2px solid #CFCFCF;border-radius: 5px;}
.ui.buttons:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.ui.buttons .button:first-child { border-left: none;}
.ui.buttons .button { float: left; border-radius: 0em;}
.ui.buttons .button:first-child { margin-left: 0em; border-top-left-radius: 0.25em; border-bottom-left-radius: 0.25em;}
.ui.buttons .button:last-child { border-top-right-radius: 0.25em; border-bottom-right-radius: 0.25em;}
.ui.button a {text-decoration: none; color:#fff;}
.ui.buttons .button:first-child a {color: #444;}
2. ضع الكود التالي في الموضوع بتبويب HTML<div style="text-align: center;">
<div class="ui buttons"> <div class="ui button"><a href='#'>عودة لتدوينة</a></div>
<div class="or"></div> <div class="ui positive button"><a href='#'>مشاهدة الحلقة</a></div> </div>
<div class="clear"></div>
أزرار بسيطة الإصدار الأول
أزرار بسيطة الإصدار الثاني
ملحوظة:
يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻
إرشادات
- موقع : Mediafire
- موقع :file-upload
- باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
- تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
- كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
- إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
تحميل الملفات
أين تجدنا؟
كلمة الختام
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم
رائع اخي الى الامام
ردحذف