جاري التحميل
المواضيع الأخيرة
أفضل 10 أعضاء في هذا الأسبوع
omarpop23
 
JoryAbdallah
 
khairanynabil
 
نورالدين خلف
 
BAZOKA Libya
 
game4rest
 

المتواجدون الآن ؟
ككل هناك 10 عُضو متصل حالياً :: 1 أعضاء, 0 عُضو مُختفي و 9 زائر :: 2 عناكب الفهرسة في محركات البحث

tofayas

[ مُعاينة اللائحة بأكملها ]


أكبر عدد للأعضاء المتواجدين في هذا المنتدى في نفس الوقت كان 141 بتاريخ 19/07/16, 08:08 am
احصائيات
هذا المنتدى يتوفر على 486 عُضو.
آخر عُضو مُسجل هو khairanynabil فمرحباً به.

أعضاؤنا قدموا 9723 مساهمة في هذا المنتدى في 1841 موضوع

منتديات تقنيات :: جاليري استايلات التومبلايت والقوالب والاكواد :: 

كود css التاثير على ازرار المنتدى ووضع لها الوان مميزة

avatar
كود css التاثير على ازرار المنتدى ووضع لها الوان مميزة

 أشكآأإل لـ آأكوآد الأزرار [button] من تحويلي

آكوآأإد css للنسخ phpbb2 & punbb & Invision

لا أطيل عليكم أتركم مع الأمثله والأكوآأإد ..~  

مثآأإل ~
* ملاحظه: مرر الماوس على الأزرار


آألكود ~










الكود:

/* كود الأزرار ------ haya.123.st -------*/

input[type="submit"], input[type=reset], .button {

  display: inline-block;

  margin: 0;

  margin-right: 12px;

  cursor: pointer;

  border: 1px solid #bbb;

  overflow: visible;

  color: #fff;

  padding: 5px 8px;

  font-size: 12px;

 font-family:Tahoma;

  line-height: 1.55em;

  vertical-align: middle;

  text-decoration: none;

  white-space: nowrap;

  -webkit-border-radius: 4px;

  -moz-border-radius: 4px;

  border-radius: 4px;

  -webkit-transition: all .15s linear;

  -moz-transition: all .15s linear;

  transition: all .15s linear;

  text-shadow: 1px 0 0 rgba(0,0,0,0.35);

  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.3)), to(rgba(255,255,255,0)));

  background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: -moz-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: -ms-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: -o-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

 

   background-color: #e92e2e;

  border-color: #d43030;

}

input[type="submit"]:hover, input[type=reset]:hover, .button:hover {




  background-color: #ee4040;

}




input[type="submit"]:active, input[type=reset]:active, .button:active {

  box-shadow: 0 1px 1px rgba(0,0,0,0.35) inset;

  background-color: #d43030;

  }




/* كود الأزرار ------ haya.123.st -------*/













[*]مثآأإل ~
* ملاحظه: مرر الماوس على الأزرار



آألكود ~



[*]

[*]


الكود:
/* كود الأزرار ------ haya.123.st -------*/

input[type="submit"], input[type=reset], .button {

  display: inline-block;

  margin: 0;

  margin-right: 12px;

  cursor: pointer;

  border: 1px solid #bbb;

  overflow: visible;

  color: #fff;

  padding: 5px 8px;

  font-size: 12px;

 font-family:Tahoma;

  line-height: 1.55em;

  vertical-align: middle;

  text-decoration: none;

  white-space: nowrap;

  -webkit-border-radius: 4px;

  -moz-border-radius: 4px;

  border-radius: 4px;

  -webkit-transition: all .15s linear;

  -moz-transition: all .15s linear;

  transition: all .15s linear;

  text-shadow: 1px 0 0 rgba(0,0,0,0.35);

  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.3)), to(rgba(255,255,255,0)));

  background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: -moz-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: -ms-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: -o-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

 

   background-color: #57a957;

  border-color: #57a957;

}

input[type="submit"]:hover, input[type=reset]:hover, .button:hover {




    background-color: #62c462;

}




input[type="submit"]:active, input[type=reset]:active, .button:active {

  box-shadow: 0 1px 1px rgba(0,0,0,0.35) inset;

  background: #57a957;

  }

/* كود الأزرار ------ haya.123.st -------*/





[*]مثآأإل ~
* ملاحظه: مرر الماوس على الأزرار


[*]

آألكود ~





الكود:
/* كود الأزرار ------ haya.123.st -------*/

input[type="submit"], input[type=reset], .button {

  display: inline-block;

  margin: 0;

  margin-right: 12px;

  cursor: pointer;

  border: 1px solid #bbb;

  overflow: visible;

  color: #fff;

  padding: 5px 8px;

  font-size: 12px;

 font-family:Tahoma;

  line-height: 1.55em;

  vertical-align: middle;

  text-decoration: none;

  white-space: nowrap;

  -webkit-border-radius: 4px;

  -moz-border-radius: 4px;

  border-radius: 4px;

  -webkit-transition: all .15s linear;

  -moz-transition: all .15s linear;

  transition: all .15s linear;

  text-shadow: 1px 0 0 rgba(0,0,0,0.35);

  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.3)), to(rgba(255,255,255,0)));

  background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: -moz-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: -ms-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: -o-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

 

 background-color: #269ce9;

  border-color: #269ce9;

}

input[type="submit"]:hover, input[type=reset]:hover, .button:hover {




  background-color: #70b9e8;

}




input[type="submit"]:active, input[type=reset]:active, .button:active {

    box-shadow: 0 1px 1px rgba(0,0,0,0.35) inset;

  background-color: #269ce9;

  }




/* كود الأزرار ------ haya.123.st -------*/






[*]مثآأإل ~
* ملاحظه: مرر الماوس على الأزرار



آألكود ~



[*]
الكود:


/* كود الأزرار ------ haya.123.st -------*/

input[type="submit"], input[type=reset], .button {

  display: inline-block;

  margin: 0;

  margin-right: 12px;

  cursor: pointer;

  border: 1px solid #bbb;

  overflow: visible;

  color: #fff;

  padding: 5px 8px;

  font-size: 12px;

 font-family:Tahoma;

  line-height: 1.55em;

  vertical-align: middle;

  text-decoration: none;

  white-space: nowrap;

  -webkit-border-radius: 4px;

  -moz-border-radius: 4px;

  border-radius: 4px;

  -webkit-transition: all .15s linear;

  -moz-transition: all .15s linear;

  transition: all .15s linear;

  text-shadow: 1px 0 0 rgba(0,0,0,0.35);

  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.3)), to(rgba(255,255,255,0)));

  background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: -moz-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: -ms-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: -o-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

 

 background-color: #ed4cd1;

  border-color: #d22ec1;

}

input[type="submit"]:hover, input[type=reset]:hover, .button:hover {




  background-color: #ec69d5;

}




input[type="submit"]:active, input[type=reset]:active, .button:active {

    box-shadow: 0 1px 1px rgba(0,0,0,0.35) inset;

  background-color: #d22ec1;

  }




/* كود الأزرار ------ haya.123.st -------*/



[*]مثآأإل ~
* ملاحظه: مرر الماوس على الأزرار



آألكود ~







[*]
الكود:
/* كود الأزرار ------ haya.123.st -------*/

input[type="submit"], input[type=reset], .button {

  display: inline-block;

  margin: 0;

  margin-right: 12px;

  cursor: pointer;

  border: 1px solid #bbb;

  overflow: visible;

  color: #fff;

  padding: 5px 8px;

  font-size: 12px;

 font-family:Tahoma;

  line-height: 1.55em;

  vertical-align: middle;

  text-decoration: none;

  white-space: nowrap;

  -webkit-border-radius: 4px;

  -moz-border-radius: 4px;

  border-radius: 4px;

  -webkit-transition: all .15s linear;

  -moz-transition: all .15s linear;

  transition: all .15s linear;

  text-shadow: 1px 0 0 rgba(0,0,0,0.35);

  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.3)), to(rgba(255,255,255,0)));

  background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: -moz-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: -ms-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: -o-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

 

 background-color: #ed4c7d;

  border-color: #d22e5c;

}

input[type="submit"]:hover, input[type=reset]:hover, .button:hover {




  background-color: #ec698b;

}




input[type="submit"]:active, input[type=reset]:active, .button:active {

    box-shadow: 0 1px 1px rgba(0,0,0,0.35) inset;

  background-color: #d22e68;

  }




/* كود الأزرار ------ haya.123.st -------*/



مثآأإل ~
* ملاحظه: مرر الماوس على الأزرار



آألكود ~


[*]
الكود:


/* كود الأزرار ------ haya.123.st -------*/

input[type="submit"], input[type=reset], .button {

  display: inline-block;

  margin: 0;

  margin-right: 12px;

  cursor: pointer;

  border: 1px solid #bbb;

  overflow: visible;

  color: #fff;

  padding: 5px 8px;

  font-size: 12px;

 font-family:Tahoma;

  line-height: 1.55em;

  vertical-align: middle;

  text-decoration: none;

  white-space: nowrap;

  -webkit-border-radius: 4px;

  -moz-border-radius: 4px;

  border-radius: 4px;

  -webkit-transition: all .15s linear;

  -moz-transition: all .15s linear;

  transition: all .15s linear;

  text-shadow: 1px 0 0 rgba(0,0,0,0.35);

  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.3)), to(rgba(255,255,255,0)));

  background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: -moz-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: -ms-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: -o-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

 

   background-color: #a457a9;

  border-color: #9957a9;

}

input[type="submit"]:hover, input[type=reset]:hover, .button:hover {




    background-color: #8b2c96;

}




input[type="submit"]:active, input[type=reset]:active, .button:active {

  box-shadow: 0 1px 1px rgba(0,0,0,0.35) inset;

  background: #9e57a9;

  }

/* كود الأزرار ------ haya.123.st -------*/





مثآأإل ~
* ملاحظه: مرر الماوس على الأزرار



آألكود ~


[*]
الكود:


/* كود الأزرار ------ haya.123.st -------*/

input[type="submit"], input[type=reset], .button {

  display: inline-block;

  margin: 0;

  margin-right: 12px;

  cursor: pointer;

  border: 1px solid #bbb;

  overflow: visible;

  color: #fff;

  padding: 5px 8px;

  font-size: 12px;

 font-family:Tahoma;

  line-height: 1.55em;

  vertical-align: middle;

  text-decoration: none;

  white-space: nowrap;

  -webkit-border-radius: 4px;

  -moz-border-radius: 4px;

  border-radius: 4px;

  -webkit-transition: all .15s linear;

  -moz-transition: all .15s linear;

  transition: all .15s linear;

  text-shadow: 1px 0 0 rgba(0,0,0,0.35);

  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.3)), to(rgba(255,255,255,0)));

  background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: -moz-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: -ms-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: -o-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

 

   background-color: #a8c508;

  border-color: #c0ce75;

}

input[type="submit"]:hover, input[type=reset]:hover, .button:hover {




  background-color: #bdd051;

}




input[type="submit"]:active, input[type=reset]:active, .button:active {

  box-shadow: 0 1px 1px rgba(0,0,0,0.35) inset;

  background-color: #a8c508;

  }

/* كود الأزرار ------ haya.123.st -------*/






[*]مثآأإل ~
* ملاحظه: مرر الماوس على الأزرار



آألكود ~


[*]
الكود:


/* كود الأزرار ------ haya.123.st -------*/

input[type="submit"], input[type=reset], .button {

  display: inline-block;

  margin: 0;

  margin-right: 12px;

  cursor: pointer;

  border: 1px solid #bbb;

  overflow: visible;

  color: #fff;

  padding: 5px 8px;

  font-size: 12px;

 font-family:Tahoma;

  line-height: 1.55em;

  vertical-align: middle;

  text-decoration: none;

  white-space: nowrap;

  -webkit-border-radius: 4px;

  -moz-border-radius: 4px;

  border-radius: 4px;

  -webkit-transition: all .15s linear;

  -moz-transition: all .15s linear;

  transition: all .15s linear;

  text-shadow: 1px 0 0 rgba(0,0,0,0.35);

  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.3)), to(rgba(255,255,255,0)));

  background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: -moz-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: -ms-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: -o-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

 

   background-color: #00dcd9;

  border-color: #30d2d4;

}

input[type="submit"]:hover, input[type=reset]:hover, .button:hover {




  background-color: #40eee8;

}




input[type="submit"]:active, input[type=reset]:active, .button:active {

  box-shadow: 0 1px 1px rgba(0,0,0,0.35) inset;

  background-color: #30d4d2;

  }

/* كود الأزرار ------ haya.123.st -------*/








[*]مثآأإل ~
* ملاحظه: مرر الماوس على الأزرار



آألكود ~



[*]
الكود:


/* كود الأزرار ------ haya.123.st -------*/

input[type="submit"], input[type=reset], .button {

  display: inline-block;

  margin: 0;

  margin-right: 12px;

  cursor: pointer;

  border: 1px solid #bbb;

  overflow: visible;

  color: #fff;

  padding: 5px 8px;

  font-size: 12px;

 font-family:Tahoma;

  line-height: 1.55em;

  vertical-align: middle;

  text-decoration: none;

  white-space: nowrap;

  -webkit-border-radius: 4px;

  -moz-border-radius: 4px;

  border-radius: 4px;

  -webkit-transition: all .15s linear;

  -moz-transition: all .15s linear;

  transition: all .15s linear;

  text-shadow: 1px 0 0 rgba(0,0,0,0.35);

  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.3)), to(rgba(255,255,255,0)));

  background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: -moz-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: -ms-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: -o-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

 

   background-color: #e9942e;

  border-color: #d48a30;

}

input[type="submit"]:hover, input[type=reset]:hover, .button:hover {




  background-color: #ee9f40;

}







input[type="submit"]:active, input[type=reset]:active, .button:active {

  box-shadow: 0 1px 1px rgba(0,0,0,0.35) inset;

  background-color: #d48a30;

  }




/* كود الأزرار ------ haya.123.st -------*/






[*]مثآأإل ~
* ملاحظه: مرر الماوس على الأزرار



آألكود ~


[*]
الكود:


/* كود الأزرار ------ haya.123.st -------*/

input[type="submit"], input[type=reset], .button {

  display: inline-block;

  margin: 0;

  margin-right: 12px;

  cursor: pointer;

  border: 1px solid #bbb;

  overflow: visible;

  color: #fff;

  padding: 5px 8px;

  font-size: 12px;

 font-family:Tahoma;

  line-height: 1.55em;

  vertical-align: middle;

  text-decoration: none;

  white-space: nowrap;

  -webkit-border-radius: 4px;

  -moz-border-radius: 4px;

  border-radius: 4px;

  -webkit-transition: all .15s linear;

  -moz-transition: all .15s linear;

  transition: all .15s linear;

  text-shadow: 1px 0 0 rgba(0,0,0,0.35);

  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.3)), to(rgba(255,255,255,0)));

  background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: -moz-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: -ms-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: -o-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

  background-image: linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));

 

   background-color: #f6863b;

  border-color: #c9743b;

}

input[type="submit"]:hover, input[type=reset]:hover, .button:hover {




  background-color: #fd954f;

}




input[type="submit"]:active, input[type=reset]:active, .button:active {

  box-shadow: 0 1px 1px rgba(0,0,0,0.35) inset;

  background-color: #df7b39;

  }

/* كود الأزرار ------ haya.123.st -------*/





[*]تضاف الاكواد بورقة css

[*]منقوووووووووووووووووول






avatar
يعطيك العافيه عع الطرحح المميز 


avatar
منورة ريانوا


m13
avatar
قممميل ي مبدعهه مبدعهه وربي
avatar
منورة ياقمر


m13
عفوا الختي جميع الاكواد مكرره


avatar
مافهمت كيف مكررة


m13
الاكواد مكرره في الموضوع حوالي 10 مرات


avatar
كود اكثر من رآئع ششكرآ ~~♥


avatar
كالعادة ابداع رائع 

وطرح يستحق المتابعة

شكراً لك 

بانتظار الجديد القادم
دمت بكل خير
avatar
سلمت الايادي الطيبة ........
في الابداع والتواصل المستمر
في نشر الجديد والمفيد
أُحييك على اختيارك الرائع والمميز..
تحياتي لك  
avatar
بارك الله فيك
avatar
السسلآلآم عليككم ورحمة الله وبركاته...
~يسعد ايامكك ..
ماشاءالله عليك جدا جميله المشاركه
الله يكتب أجرك ويارب تكون في موآزين اعمالك
ماقصرت على هالحضور بجد أبدعت..
جهود مبارك جزاك الله خيرا
دمت ودام عطائك
ودائما بأنتظار جديدك الشيق
لك خالص تقديري واحترامي
دمت بخير
avatar
السلام عليكم ورحمة الله وبركاته
ألف شكر لكَ على هذا الموضوع المميز و المعلومات القيمة
إنـجاز أكثر رائــــــع
لكن أرجو منكَ عدم التوقف عند هذا الحد
مـنتظرين ابداعتــــــك
دمتـ ودام تألقـك
تحياتــي

سجل دخولك أو انشئ حساب لترك رد

تحتاج إلى أن تكون عضوا من أجل ترك الرد.

انشئ حساب

الانضمام إلى مجتمعنا من خلال إنشاء حساب جديد. من السهل


انشئ حساب جديد

تسجل دخول

هل لديك حساب بالفعل؟ لا توجد مشكلة، قم بتسجيل الدخول هنا.


تسجيل دخول