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

  افضل مساهمة1
كود 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

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






  افضل مساهمة2
يعطيك العافيه عع الطرحح المميز 


  افضل مساهمة3
منورة ريانوا


m13
  افضل مساهمة4
قممميل ي مبدعهه مبدعهه وربي
  افضل مساهمة5
منورة ياقمر


m13
  افضل مساهمة6
عفوا الختي جميع الاكواد مكرره


  افضل مساهمة7
مافهمت كيف مكررة


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


  افضل مساهمة9
كود اكثر من رآئع ششكرآ ~~♥


  افضل مساهمة10
كالعادة ابداع رائع 

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

شكراً لك 

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