أهلا وسهلا بك إلى hossam123.
أهلا وسهلا بك ضيفنا الكريم، إذا كانت هذه زيارتك الأولى للمنتدى، فيرجى التكرم بزيارة صفحة التعليمات، بالضغط هنا.كما يشرفنا أن تقوم بالتسجيل بالضغط هنا إذا رغبت بالمشاركة في المنتدى، وفي حال رغبت بقراءة المواضيع والإطلاع فتفضل بزيارة القسم الذي ترغب أدناه.


hossam123 :: دعم منتديات احلى منتدى :: اكواد CSS

شاطر

رقم المشاركة : [ 1 ]
قديمالإثنين أغسطس 10, 2015 10:32 am
Admin
Admin
avatar


Time Online :
1d 20h 25m 49s

عدد المساهمات :
278

تاريخ التسجيل :
04/07/2011

الماجيك مسعد will become famous soon enoughالماجيك مسعد will become famous soon enough
غير متواجد
مُساهمةموضوع: أزرار بسيطة | الجزء الخامس


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


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


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


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. ضع الكود التالي به



[center]

الكود:
 <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>
[/center]










الــرد الســـريـع
..




الذين يشاهدون محتوى الموضوع الآن : 20 ( الأعضاء 3 والزوار 17)




تعليمات المشاركة
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة