حالة الموضوع:
مغلق
  1. .:: RSS ::.

    .:: RSS ::. عضوية آلية

    الأنتساب:
    ‏9 سبتمبر 2011
    المشاركات:
    14,005
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    36
    الإقامة:
    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​
     
حالة الموضوع:
مغلق

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