أزرار بسيطة | الجزء الأول

البساطة في الأزرار، زرين متشابكين مع بعضعهما يمكن إستخدامهما في عدة أمور تحميل أو معاينة أو تحميل مقسم وغير ذلك، يتضمنان كذلك تأثير الضغط يضيئ قليلا كما ستجربونه بأنفسكم في المعاينة التالية

• معاينة من JS
 
• معاينة من مدونة

شرح  طريقة التركيب

1 . توجه لقالب >> تحرير 

2. ابحث بإستعمال CTRL+F عن  ]]></b:skin>

3. ضع الكود التالي قبله [ فوقه ]

.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;}

تغيير لون الزر الأيمن 

* كود اللون المحدد بالأصفر #F9BB4A هو للون الخارجي

* كود اللون المحدد بالأخضر #F7A130 هو للهوفر

* كود اللون المحدد بالأزرق #FFBC64 هو لون الضغط

 تفعيل الكود

1. حرر الموضوع

2. إنتقل لتبويب HTML

3. ضع الكود التالي به

 <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>