البساطة في الأزرار، زرين متشابكين مع بعضعهما يمكن إستخدامهما في عدة أمور تحميل أو معاينة أو تحميل مقسم وغير ذلك، يتضمنان كذلك تأثير الضغط يضيئ قليلا كما ستجربونه بأنفسكم
طريقة التركيب :
1.ابحث عن ]]></b:skin> وضع الكود التالي فوقه .
.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>
3. استبدل علامات # الملونة بلأحمر بروابط لك .
( لا تتردد في اي استفسار او طلب وبتقيمك لنا في التعليقات تحفزنا على الاستمرار في تقديم الافضل لكم )
