1. أهلا وسهلاً بكم في :: IQ-TeaM FORUM :: .
    إذا كانت هذه الزيارة الأولى أو لديك الرغبة بالانضمام لأعضاء شبكة عراق تيم فيجب الاطلاع على خصوصية الشبكه فربما بقائك زائر افضل لك من الانضمام بحيث أن قوانين شبكة عراق تيم لا تتناسب مع اهتماماتك .
    • للأطلاع على الخصوصية وسياسة الاستخدام - التفاصيل
    • بعد الاطلاع على سياسة الموقع وقوانين شبكة عراق تيم يمكنك التسجيل معنا - تسجيل عضو جديد
    إستبعاد الملاحظة
الكاتب : .:: RSS ::. | المشاهدات : 1,550 | الردود : 0
حالة الموضوع:
مغلق
  1. .:: RSS ::. عضوية آلية

    الأنتساب:
    ‏9 سبتمبر 2011
    المشاركات:
    14,005
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    80
    الإقامة:
    IQ-T34M
    الأن | اجعل أزرار منتداك | بتقنية css3



    [​IMG]

    اليوم اقدم لڪم حرڪة رائعة و بتقنية CSS 3
    لأزرار المنتدى ، يعني رح يتغير ازرار المنتدى بشكل جزري
    وهذا الحرڪة ممكن ما شايفها بحياتڪ

    [​IMG]


    ,المثال،

    [​IMG]

    قبل الضغط :
    [​IMG]
    بعد الضغط :

    [​IMG]


    ,الڪود،


    اللون الأزرق

    كود PHP:
    .button{
    text-decoration: none !important;
    background-color:#519ee0;
    padding-left: 27px;
    padding-right: 27px;
    height: 26px;
    line-height: 26px !important;
    display: inline-block;
    border: 1px solid #2167a3;
    text-shadow:0px 1px 1px #000;

    -webkit-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #2167a3;
    -moz-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #2167a3;
    box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #2167a3;

    -webkit-border-radius: 5px;
    -
    moz-border-radius: 5px;
    border-radius: 5px;

    -
    webkit-transition: all 0.15s linear;
    -
    moz-transition: all 0.15s linear;
    -
    o-transition: all 0.15s linear;

    }



    .
    button:hover{
    text-decoration: none !important;
    background-color:#74b4eb;
    padding-left: 27px;
    padding-right: 27px;
    height: 26px;
    line-height: 26px !important;
    display: inline-block;
    border: 1px solid #2167a3;
    text-shadow:0px 1px 1px #000;

    -webkit-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #2167a3;
    -moz-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #2167a3;
    box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #2167a3;

    -webkit-border-radius: 5px;
    -
    moz-border-radius: 5px;
    border-radius: 5px;

    -
    webkit-transition: all 0.15s linear;
    -
    moz-transition: all 0.15s linear;
    -
    o-transition: all 0.15s linear;

    }


    .
    button{
    font-family:Tahoma, Geneva, sans-serif;
    line-height: 26px !important;
    font-size: 12px;

    color: #EAEAEA;
    text-align:center;
    -
    webkit-transition: all 0.15s linear;
    -
    moz-transition: all 0.15s linear;
    -
    o-transition: all 0.15s linear;
    transition: all 0.15s linear;
    }


    .
    button:active{
    background-color:#387db8;
    margin-top:5px;
    -
    webkit-box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;
    -moz-box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;
    box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;

    }

    .
    button:hover .button{

    text-shadow:0px -1px 1px #000;
    color:#b2161a;
    }


    اللون الأحمر

    كود PHP:
    .button{
    text-decoration: none !important;
    background-color:#ca2a2a;
    padding-left: 27px;
    padding-right: 27px;
    height: 26px;
    line-height: 26px !important;
    display: inline-block;
    border: 1px solid #a01c1c;
    text-shadow:0px 1px 1px #000;

    -webkit-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #a01c1c;
    -moz-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #a01c1c;
    box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #a01c1c;

    -webkit-border-radius: 5px;
    -
    moz-border-radius: 5px;
    border-radius: 5px;

    -
    webkit-transition: all 0.15s linear;
    -
    moz-transition: all 0.15s linear;
    -
    o-transition: all 0.15s linear;

    }



    .
    button:hover{
    text-decoration: none !important;
    background-color:#e04c4c;
    padding-left: 27px;
    padding-right: 27px;
    height: 26px;
    line-height: 26px !important;
    display: inline-block;
    border: 1px solid #a01c1c;
    text-shadow:0px 1px 1px #000;

    -webkit-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #a01c1c;
    -moz-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #a01c1c;
    box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #a01c1c;

    -webkit-border-radius: 5px;
    -
    moz-border-radius: 5px;
    border-radius: 5px;

    -
    webkit-transition: all 0.15s linear;
    -
    moz-transition: all 0.15s linear;
    -
    o-transition: all 0.15s linear;

    }


    .
    button{
    font-family:Tahoma, Geneva, sans-serif;
    line-height: 26px !important;
    font-size: 12px;

    color: #EAEAEA;
    text-align:center;
    -
    webkit-transition: all 0.15s linear;
    -
    moz-transition: all 0.15s linear;
    -
    o-transition: all 0.15s linear;
    transition: all 0.15s linear;
    }


    .
    button:active{
    background-color:#932020;
    margin-top:5px;
    -
    webkit-box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;
    -moz-box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;
    box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;

    }

    .
    button:hover .button{

    text-shadow:0px -1px 1px #000;
    color:#b2161a;
    }


    اللون الأخضر

    كود PHP:
    .button{
    text-decoration: none !important;
    background-color:#36b230;
    padding-left: 27px;
    padding-right: 27px;
    height: 26px;
    line-height: 26px !important;
    display: inline-block;
    border: 1px solid #258420;
    text-shadow:0px 1px 1px #000;

    -webkit-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #258420;
    -moz-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #258420;
    box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #258420;

    -webkit-border-radius: 5px;
    -
    moz-border-radius: 5px;
    border-radius: 5px;

    -
    webkit-transition: all 0.15s linear;
    -
    moz-transition: all 0.15s linear;
    -
    o-transition: all 0.15s linear;

    }



    .
    button:hover{
    text-decoration: none !important;
    background-color:#56cd50;
    padding-left: 27px;
    padding-right: 27px;
    height: 26px;
    line-height: 26px !important;
    display: inline-block;
    border: 1px solid #258420;
    text-shadow:0px 1px 1px #000;

    -webkit-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #258420;
    -moz-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #258420;
    box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #258420;

    -webkit-border-radius: 5px;
    -
    moz-border-radius: 5px;
    border-radius: 5px;

    -
    webkit-transition: all 0.15s linear;
    -
    moz-transition: all 0.15s linear;
    -
    o-transition: all 0.15s linear;

    }


    .
    button{
    font-family:Tahoma, Geneva, sans-serif;
    line-height: 26px !important;
    font-size: 12px;

    color: #EAEAEA;
    text-align:center;
    -
    webkit-transition: all 0.15s linear;
    -
    moz-transition: all 0.15s linear;
    -
    o-transition: all 0.15s linear;
    transition: all 0.15s linear;
    }


    .
    button:active{
    background-color:#1a6517;
    margin-top:5px;
    -
    webkit-box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;
    -moz-box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;
    box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;

    }

    .
    button:hover .button{

    text-shadow:0px -1px 1px #000;
    color:#b2161a;
    }


    اللون الزهري

    كود PHP:
    .button{
    text-decoration: none !important;
    background-color:#d252be;
    padding-left: 27px;
    padding-right: 27px;
    height: 26px;
    line-height: 26px !important;
    display: inline-block;
    border: 1px solid #a83997;
    text-shadow:0px 1px 1px #000;

    -webkit-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #a83997;
    -moz-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #a83997;
    box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #a83997;

    -webkit-border-radius: 5px;
    -
    moz-border-radius: 5px;
    border-radius: 5px;

    -
    webkit-transition: all 0.15s linear;
    -
    moz-transition: all 0.15s linear;
    -
    o-transition: all 0.15s linear;

    }



    .
    button:hover{
    text-decoration: none !important;
    background-color:#eb7eda;
    padding-left: 27px;
    padding-right: 27px;
    height: 26px;
    line-height: 26px !important;
    display: inline-block;
    border: 1px solid #a83997;
    text-shadow:0px 1px 1px #000;

    -webkit-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #a83997;
    -moz-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #a83997;
    box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #a83997;

    -webkit-border-radius: 5px;
    -
    moz-border-radius: 5px;
    border-radius: 5px;

    -
    webkit-transition: all 0.15s linear;
    -
    moz-transition: all 0.15s linear;
    -
    o-transition: all 0.15s linear;

    }


    .
    button{
    font-family:Tahoma, Geneva, sans-serif;
    line-height: 26px !important;
    font-size: 12px;

    color: #EAEAEA;
    text-align:center;
    -
    webkit-transition: all 0.15s linear;
    -
    moz-transition: all 0.15s linear;
    -
    o-transition: all 0.15s linear;
    transition: all 0.15s linear;
    }


    .
    button:active{
    background-color:#661a5a;
    margin-top:5px;
    -
    webkit-box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;
    -moz-box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;
    box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;

    }

    .
    button:hover .button{

    text-shadow:0px -1px 1px #000;
    color:#b2161a;
    }


    اللون البرتقالي

    كود PHP:
    .button{
    text-decoration: none !important;
    background-color:#dc7f3c;
    padding-left: 27px;
    padding-right: 27px;
    height: 26px;
    line-height: 26px !important;
    display: inline-block;
    border: 1px solid #a55718;
    text-shadow:0px 1px 1px #000;

    -webkit-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #a55718;
    -moz-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #a55718;
    box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #a55718;

    -webkit-border-radius: 5px;
    -
    moz-border-radius: 5px;
    border-radius: 5px;

    -
    webkit-transition: all 0.15s linear;
    -
    moz-transition: all 0.15s linear;
    -
    o-transition: all 0.15s linear;

    }



    .
    button:hover{
    text-decoration: none !important;
    background-color:#f19b5c;
    padding-left: 27px;
    padding-right: 27px;
    height: 26px;
    line-height: 26px !important;
    display: inline-block;
    border: 1px solid #a55718;
    text-shadow:0px 1px 1px #000;

    -webkit-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #a55718;
    -moz-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #a55718;
    box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #a55718;

    -webkit-border-radius: 5px;
    -
    moz-border-radius: 5px;
    border-radius: 5px;

    -
    webkit-transition: all 0.15s linear;
    -
    moz-transition: all 0.15s linear;
    -
    o-transition: all 0.15s linear;

    }


    .
    button{
    font-family:Tahoma, Geneva, sans-serif;
    line-height: 26px !important;
    font-size: 12px;

    color: #EAEAEA;
    text-align:center;
    -
    webkit-transition: all 0.15s linear;
    -
    moz-transition: all 0.15s linear;
    -
    o-transition: all 0.15s linear;
    transition: all 0.15s linear;
    }


    .
    button:active{
    background-color:#82471c;
    margin-top:5px;
    -
    webkit-box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;
    -moz-box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;
    box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;

    }

    .
    button:hover .button{

    text-shadow:0px -1px 1px #000;
    color:#b2161a;
    }


    اللون الرصاصي

    كود PHP:
    .button{
    text-decoration: none !important;
    background-color:#cacaca;
    padding-left: 27px;
    padding-right: 27px;
    height: 26px;
    line-height: 26px !important;
    display: inline-block;
    border: 1px solid #9b9b9b;
    text-shadow:0px 1px 1px #000;

    -webkit-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #9b9b9b;
    -moz-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #9b9b9b;
    box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #9b9b9b;

    -webkit-border-radius: 5px;
    -
    moz-border-radius: 5px;
    border-radius: 5px;

    -
    webkit-transition: all 0.15s linear;
    -
    moz-transition: all 0.15s linear;
    -
    o-transition: all 0.15s linear;

    }



    .
    button:hover{
    text-decoration: none !important;
    background-color:#e0e0e0;
    padding-left: 27px;
    padding-right: 27px;
    height: 26px;
    line-height: 26px !important;
    display: inline-block;
    border: 1px solid #9b9b9b;
    text-shadow:0px 1px 1px #000;

    -webkit-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #9b9b9b;
    -moz-box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #9b9b9b;
    box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #9b9b9b;

    -webkit-border-radius: 5px;
    -
    moz-border-radius: 5px;
    border-radius: 5px;

    -
    webkit-transition: all 0.15s linear;
    -
    moz-transition: all 0.15s linear;
    -
    o-transition: all 0.15s linear;

    }


    .
    button{
    font-family:Tahoma, Geneva, sans-serif;
    line-height: 26px !important;
    font-size: 12px;

    color: #8a8a8a;
    text-align:center;
    -
    webkit-transition: all 0.15s linear;
    -
    moz-transition: all 0.15s linear;
    -
    o-transition: all 0.15s linear;
    transition: all 0.15s linear;
    }


    .
    button:active{
    background-color:#606060;
    margin-top:5px;
    -
    webkit-box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;
    -moz-box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;
    box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;
    font-family:Tahoma, Geneva, sans-serif;
    line-height: 26px !important;
    font-size: 12px;

    color: #fff;
    text-align:center;

    }

    .
    button:hover .button{

    text-shadow:0px -1px 1px #000;
    color:#fff;
    }


    ,الترڪيب،

    ڪل ما عليك فعله هو اختيار احد الاڪواد في الأعلى
    وتذهب الى css الرئيسي للاستايل اللي تريد التطبيق عليه
    و تنزل أسفل الصفحة وتشوف 2 مربع ڪبار
    الصق الڪود في المربع الثاني


    واحفظ ومبروڪ


    [​IMG]

    جميع الحقوق محفوظة لشبكة عراق تيم
    و شرڪة ديتورز لخدمات الويب المتڪاملة
    © 2012

    [​IMG]
    </ul>





    hgHk | h[ug H.vhv lkj]h; fjrkdm css3​
     
حالة الموضوع:
مغلق

مشاركة هذه الصفحة