الرئيسيةالرئيسية  س .و .جس .و .ج  بحـثبحـث  قائمة الاعضاءقائمة الاعضاء  التسجيلالتسجيل  المجموعاتالمجموعات  دخولدخول  

السلام عليكم ورحمة الله وبركاته

اليوم عدت بدفعه جديده لأكوآأد في غايه الجمآأل pig 

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

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

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

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


آألكود ~


الرمز:


/* كود الأزرار ------ 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 نظغط عليه



نضع الكود في المربع ثم نظغط قدم





الأكواد من تحويلي [هياء محمد & haya.123.st] المصدر : هنا


Arrow 

ون شاء الله تعجبكم وانتظروا الدفعه القادمه من الأشكآأإل المذهله

إي أستفسارات أو ملاحظات أستقبلها في هذاآأ الموضوع

والسلام عليكم ورحمة الله وبركاته



نُشرت في 18 10 2013   بواسطة  [ღ]هيآء محمدَ..


مُساهمة في 18.10.13 2:45 من طرف أكسوَ فيتإلُ ☆~
وآآآآآآآآآآآو شكرأإ جدآ قميله صصرأإحه نآيس بإنتظار أإكوأإدكك الخييآل

مُساهمة في 18.10.13 4:13 من طرف [ღ]هيآء محمدَ..
Dream

تسلمين يآأإعسلّ ع مرورك وردك الجميل .. شكرآألك ..^.^

مُساهمة في 26.10.13 1:49 من طرف هدايا دعوية
ماشاء الله عليك ... فكرتك جدآ جميلة ورائعة ...... 

ربي يعطيك العافية على الحويل القميل ^^

مُساهمة في 30.10.13 19:28 من طرف [ღ]هيآء محمدَ..
شكرآأإ لمرورك الرآأئع ..^^

مُساهمة في 09.11.13 5:59 من طرف $ جون سينا $
بسم الله مشاء الله 
كود رائع جدا

مُساهمة في 09.11.13 18:32 من طرف يٌوكي
شكرا جدا
كود رائع وللة انا هركبة

مُساهمة في 10.11.13 1:05 من طرف Dr.AsheK
جدآ فممميل #

مُساهمة في 29.11.13 11:11 من طرف [ღ]هيآء محمدَ..
شگرآأإ لمروركم آلرآأئع ..^^

مُساهمة في 19.04.14 22:03 من طرف M!ss Asakura
جميل سناء =) ...قصدي هياء هوهوهيهيهي ....>>>لا تقتليني
المهم ...
في راسي نص اقتراح ما راح اقترحه حالياً حتى يصير اقتراح كامل xDD

مُساهمة في 25.04.14 23:28 من طرف Rosseta
كود رآئعع ومذهل ً !
آبدعت ِ ي سست !
بآنتتظآر ججديدك

مُساهمة في 22.05.14 15:28 من طرف ارْتِــوَاءٌ
عنجد ككود رآئع ومميز


الله يعطيكك آلف عآفيهةة

مُساهمة في 22.05.14 20:05 من طرف ~♪ Ĵμƨτ мє
اكواد رائعة تم التجريب و هي فعالة مئة بالمئة ^^

مُساهمة في 12.07.14 7:52 من طرف AsheK Egyption
رائع تسلمى

مُساهمة في 10.11.14 8:14 من طرف ! Zainab
السلام عليكم 
و ربي كود يجنن *-* !!
تسلم يداكي ،،
بس انا ما ضبط عندي :\
تقدري تقولي لي السبب او 
احتملات هي يلي ما خلته 
يضبط ؟! ^^ و سلام =)

مُساهمة في 08.06.15 3:57 من طرف walid dz
لم تظهر الازرار بالرغم من تغير ازرار اخرى في منتداي

اين المشكل

مُساهمة في 11.06.15 11:53 من طرف [ღ]هيآء محمدَ..
هل بالامكان ارفاق المنتدى الذي لايعمل عليه الكود ؟

مُساهمة في 12.06.15 3:34 من طرف walid dz
تفضلي اختي

http://www.pro-dz.net/

مُساهمة في 12.06.15 7:44 من طرف [ღ]هيآء محمدَ..
دخلت وظهرت لي

http://s01.arab.sh/i/00038/x12y9tfz8dw2.gif

مُساهمة في 13.06.15 0:38 من طرف walid dz
اختي هيفاء تلك الازرار الذي صورتها تظهر في صندوق الرد

انا اقصد اسفل الموضوع نقل وحذف ووووو

وشكرا لمواضيعكي المميزة هنا ربي يحفضك