15‏/01‏/2015

البساطة في الأزرار، زرين متشابكين مع بعضعهما يمكن إستخدامهما في عدة أمور تحميل أو معاينة أو تحميل مقسم وغير ذلك، يتضمنان كذلك تأثير الضغط يضيئ قليلا كما ستجربونه بأنفسكم في المعاينة التالية
شرح طريقة التركيب
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.ابحث عن ]]></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 Blogger تعليقات
Disqus
1 تعليق
المشرف
avatar

رائع اخي الى الامام

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة