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

الثلاثاء نوفمبر 27, 2018 8:09 am

كود 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 -------*/