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

    ZEBARH Developer

    الأنتساب:
    ‏6 ابريل 2012
    المشاركات:
    7
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    1
    الإقامة:
    تركيا/اسطنبول

    [​IMG]

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

    [​IMG]


    ,المثال،

    [​IMG]

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

    [​IMG]


    ,الڪود،


    اللون الأزرق

    كود PHP:
    .button
        
    text-decorationnone !important;
        
    background-color:#519ee0;
        
    padding-left27px;
        
    padding-right27px;
        
    height26px;
        
    line-height26px !important;
        
    displayinline-block;
        
    border1px solid #2167a3;
        
    text-shadow:0px 1px 1px #000;
        
        
    -webkit-box-shadowinset 0px 1px 1px #fff, 0 5px 0px 0px #2167a3;
        
    -moz-box-shadowinset 0px 1px 1px #fff, 0 5px 0px 0px #2167a3;
        
    box-shadowinset 0px 1px 1px #fff, 0 5px 0px 0px #2167a3;
      
        
    -webkit-border-radius5px;
        -
    moz-border-radius5px;
        
    border-radius5px;

        -
    webkit-transitionall 0.15s linear;
        -
    moz-transitionall 0.15s linear;
        -
    o-transitionall 0.15s linear;

    }



    .
    button:hover{
        
    text-decorationnone !important;
        
    background-color:#74b4eb;
        
    padding-left27px;
        
    padding-right27px;
        
    height26px;
        
    line-height26px !important;
        
    displayinline-block;
        
    border1px solid #2167a3;
        
    text-shadow:0px 1px 1px #000;
        
        
    -webkit-box-shadowinset 0px 1px 1px #fff, 0 5px 0px 0px #2167a3;
        
    -moz-box-shadowinset 0px 1px 1px #fff, 0 5px 0px 0px #2167a3;
        
    box-shadowinset 0px 1px 1px #fff, 0 5px 0px 0px #2167a3;
      
        
    -webkit-border-radius5px;
        -
    moz-border-radius5px;
        
    border-radius5px;

        -
    webkit-transitionall 0.15s linear;
        -
    moz-transitionall 0.15s linear;
        -
    o-transitionall 0.15s linear;

    }


    .
    button{
        
    font-family:TahomaGenevasans-serif;
        
    line-height26px !important;
        
    font-size12px;

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


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

    }

    .
    button:hover .button{

        
    text-shadow:0px -1px 1px #000;
        
    color:#b2161a;
    }
    اللون الأحمر

    كود PHP:
    .button{
        
    text-decorationnone !important;
        
    background-color:#ca2a2a;
        
    padding-left27px;
        
    padding-right27px;
        
    height26px;
        
    line-height26px !important;
        
    displayinline-block;
        
    border1px solid #a01c1c;
        
    text-shadow:0px 1px 1px #000;
        
        
    -webkit-box-shadowinset 0px 1px 1px #fff, 0 5px 0px 0px #a01c1c;
        
    -moz-box-shadowinset 0px 1px 1px #fff, 0 5px 0px 0px #a01c1c;
        
    box-shadowinset 0px 1px 1px #fff, 0 5px 0px 0px #a01c1c;
      
        
    -webkit-border-radius5px;
        -
    moz-border-radius5px;
        
    border-radius5px;

        -
    webkit-transitionall 0.15s linear;
        -
    moz-transitionall 0.15s linear;
        -
    o-transitionall 0.15s linear;

    }



    .
    button:hover{
        
    text-decorationnone !important;
        
    background-color:#e04c4c;
        
    padding-left27px;
        
    padding-right27px;
        
    height26px;
        
    line-height26px !important;
        
    displayinline-block;
        
    border1px solid #a01c1c;
        
    text-shadow:0px 1px 1px #000;
        
        
    -webkit-box-shadowinset 0px 1px 1px #fff, 0 5px 0px 0px #a01c1c;
        
    -moz-box-shadowinset 0px 1px 1px #fff, 0 5px 0px 0px #a01c1c;
        
    box-shadowinset 0px 1px 1px #fff, 0 5px 0px 0px #a01c1c;
      
        
    -webkit-border-radius5px;
        -
    moz-border-radius5px;
        
    border-radius5px;

        -
    webkit-transitionall 0.15s linear;
        -
    moz-transitionall 0.15s linear;
        -
    o-transitionall 0.15s linear;

    }


    .
    button{
        
    font-family:TahomaGenevasans-serif;
        
    line-height26px !important;
        
    font-size12px;

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


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

    }

    .
    button:hover .button{

        
    text-shadow:0px -1px 1px #000;
        
    color:#b2161a;
    }
    اللون الأخضر

    كود PHP:
    .button{
        
    text-decorationnone !important;
        
    background-color:#36b230;
        
    padding-left27px;
        
    padding-right27px;
        
    height26px;
        
    line-height26px !important;
        
    displayinline-block;
        
    border1px solid #258420;
        
    text-shadow:0px 1px 1px #000;
        
        
    -webkit-box-shadowinset 0px 1px 1px #fff, 0 5px 0px 0px #258420;
        
    -moz-box-shadowinset 0px 1px 1px #fff, 0 5px 0px 0px #258420;
        
    box-shadowinset 0px 1px 1px #fff, 0 5px 0px 0px #258420;
      
        
    -webkit-border-radius5px;
        -
    moz-border-radius5px;
        
    border-radius5px;

        -
    webkit-transitionall 0.15s linear;
        -
    moz-transitionall 0.15s linear;
        -
    o-transitionall 0.15s linear;

    }



    .
    button:hover{
        
    text-decorationnone !important;
        
    background-color:#56cd50;
        
    padding-left27px;
        
    padding-right27px;
        
    height26px;
        
    line-height26px !important;
        
    displayinline-block;
        
    border1px solid #258420;
        
    text-shadow:0px 1px 1px #000;
        
        
    -webkit-box-shadowinset 0px 1px 1px #fff, 0 5px 0px 0px #258420;
        
    -moz-box-shadowinset 0px 1px 1px #fff, 0 5px 0px 0px #258420;
        
    box-shadowinset 0px 1px 1px #fff, 0 5px 0px 0px #258420;
      
        
    -webkit-border-radius5px;
        -
    moz-border-radius5px;
        
    border-radius5px;

        -
    webkit-transitionall 0.15s linear;
        -
    moz-transitionall 0.15s linear;
        -
    o-transitionall 0.15s linear;

    }


    .
    button{
        
    font-family:TahomaGenevasans-serif;
        
    line-height26px !important;
        
    font-size12px;

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


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

    }

    .
    button:hover .button{

        
    text-shadow:0px -1px 1px #000;
        
    color:#b2161a;
    }
    اللون الزهري

    كود PHP:
    .button{
        
    text-decorationnone !important;
        
    background-color:#d252be;
        
    padding-left27px;
        
    padding-right27px;
        
    height26px;
        
    line-height26px !important;
        
    displayinline-block;
        
    border1px solid #a83997;
        
    text-shadow:0px 1px 1px #000;
        
        
    -webkit-box-shadowinset 0px 1px 1px #fff, 0 5px 0px 0px #a83997;
        
    -moz-box-shadowinset 0px 1px 1px #fff, 0 5px 0px 0px #a83997;
        
    box-shadowinset 0px 1px 1px #fff, 0 5px 0px 0px #a83997;
      
        
    -webkit-border-radius5px;
        -
    moz-border-radius5px;
        
    border-radius5px;

        -
    webkit-transitionall 0.15s linear;
        -
    moz-transitionall 0.15s linear;
        -
    o-transitionall 0.15s linear;

    }



    .
    button:hover{
        
    text-decorationnone !important;
        
    background-color:#eb7eda;
        
    padding-left27px;
        
    padding-right27px;
        
    height26px;
        
    line-height26px !important;
        
    displayinline-block;
        
    border1px solid #a83997;
        
    text-shadow:0px 1px 1px #000;
        
        
    -webkit-box-shadowinset 0px 1px 1px #fff, 0 5px 0px 0px #a83997;
        
    -moz-box-shadowinset 0px 1px 1px #fff, 0 5px 0px 0px #a83997;
        
    box-shadowinset 0px 1px 1px #fff, 0 5px 0px 0px #a83997;
      
        
    -webkit-border-radius5px;
        -
    moz-border-radius5px;
        
    border-radius5px;

        -
    webkit-transitionall 0.15s linear;
        -
    moz-transitionall 0.15s linear;
        -
    o-transitionall 0.15s linear;

    }


    .
    button{
        
    font-family:TahomaGenevasans-serif;
        
    line-height26px !important;
        
    font-size12px;

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


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

    }

    .
    button:hover .button{

        
    text-shadow:0px -1px 1px #000;
        
    color:#b2161a;
    }
    اللون البرتقالي

    كود PHP:
    .button{
        
    text-decorationnone !important;
        
    background-color:#dc7f3c;
        
    padding-left27px;
        
    padding-right27px;
        
    height26px;
        
    line-height26px !important;
        
    displayinline-block;
        
    border1px solid #a55718;
        
    text-shadow:0px 1px 1px #000;
        
        
    -webkit-box-shadowinset 0px 1px 1px #fff, 0 5px 0px 0px #a55718;
        
    -moz-box-shadowinset 0px 1px 1px #fff, 0 5px 0px 0px #a55718;
        
    box-shadowinset 0px 1px 1px #fff, 0 5px 0px 0px #a55718;
      
        
    -webkit-border-radius5px;
        -
    moz-border-radius5px;
        
    border-radius5px;

        -
    webkit-transitionall 0.15s linear;
        -
    moz-transitionall 0.15s linear;
        -
    o-transitionall 0.15s linear;

    }



    .
    button:hover{
        
    text-decorationnone !important;
        
    background-color:#f19b5c;
        
    padding-left27px;
        
    padding-right27px;
        
    height26px;
        
    line-height26px !important;
        
    displayinline-block;
        
    border1px solid #a55718;
        
    text-shadow:0px 1px 1px #000;
        
        
    -webkit-box-shadowinset 0px 1px 1px #fff, 0 5px 0px 0px #a55718;
        
    -moz-box-shadowinset 0px 1px 1px #fff, 0 5px 0px 0px #a55718;
        
    box-shadowinset 0px 1px 1px #fff, 0 5px 0px 0px #a55718;
      
        
    -webkit-border-radius5px;
        -
    moz-border-radius5px;
        
    border-radius5px;

        -
    webkit-transitionall 0.15s linear;
        -
    moz-transitionall 0.15s linear;
        -
    o-transitionall 0.15s linear;

    }


    .
    button{
        
    font-family:TahomaGenevasans-serif;
        
    line-height26px !important;
        
    font-size12px;

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


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

    }

    .
    button:hover .button{

        
    text-shadow:0px -1px 1px #000;
        
    color:#b2161a;
    }
    اللون الرصاصي

    كود PHP:
    .button{
        
    text-decorationnone !important;
        
    background-color:#cacaca;
        
    padding-left27px;
        
    padding-right27px;
        
    height26px;
        
    line-height26px !important;
        
    displayinline-block;
        
    border1px solid #9b9b9b;
        
    text-shadow:0px 1px 1px #000;
        
        
    -webkit-box-shadowinset 0px 1px 1px #fff, 0 5px 0px 0px #9b9b9b;
        
    -moz-box-shadowinset 0px 1px 1px #fff, 0 5px 0px 0px #9b9b9b;
        
    box-shadowinset 0px 1px 1px #fff, 0 5px 0px 0px #9b9b9b;
      
        
    -webkit-border-radius5px;
        -
    moz-border-radius5px;
        
    border-radius5px;

        -
    webkit-transitionall 0.15s linear;
        -
    moz-transitionall 0.15s linear;
        -
    o-transitionall 0.15s linear;

    }



    .
    button:hover{
        
    text-decorationnone !important;
        
    background-color:#e0e0e0;
        
    padding-left27px;
        
    padding-right27px;
        
    height26px;
        
    line-height26px !important;
        
    displayinline-block;
        
    border1px solid #9b9b9b;
        
    text-shadow:0px 1px 1px #000;
        
        
    -webkit-box-shadowinset 0px 1px 1px #fff, 0 5px 0px 0px #9b9b9b;
        
    -moz-box-shadowinset 0px 1px 1px #fff, 0 5px 0px 0px #9b9b9b;
        
    box-shadowinset 0px 1px 1px #fff, 0 5px 0px 0px #9b9b9b;
      
        
    -webkit-border-radius5px;
        -
    moz-border-radius5px;
        
    border-radius5px;

        -
    webkit-transitionall 0.15s linear;
        -
    moz-transitionall 0.15s linear;
        -
    o-transitionall 0.15s linear;

    }


    .
    button{
        
    font-family:TahomaGenevasans-serif;
        
    line-height26px !important;
        
    font-size12px;

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


    .
    button:active{
        
    background-color:#606060;
        
    margin-top:5px;
        -
    webkit-box-shadowinset 0px 1px 1px #000, 0 0px 0px 0px #000;
        
    -moz-box-shadowinset 0px 1px 1px #000, 0 0px 0px 0px #000;
        
    box-shadowinset 0px 1px 1px #000, 0 0px 0px 0px #000;
        
    font-family:TahomaGenevasans-serif;
        
    line-height26px !important;
        
    font-size12px;

        
    color#fff;
        
    text-align:center;

    }

    .
    button:hover .button{

        
    text-shadow:0px -1px 1px #000;
        
    color:#fff;
    }
    ,الترڪيب،

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


    واحفظ ومبروڪ


    [​IMG]

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

    [​IMG]
     
  2. 8X8

    8X8 ExpErt DeveloPer

    الأنتساب:
    ‏3 أكتوبر 2011
    المشاركات:
    60
    الإعجابات المتلقاة:
    1
    نقاط الجائزة:
    8
    الوظيفة:
    برمجه
    الإقامة:
    مصر
    رد: الأن | اجعل أزرار منتداك | بتقنية css3

    مشكور حبيبي &:":​
     
  3. هوك

    هوك DeveloPer Plus

    الأنتساب:
    ‏17 نوفمبر 2011
    المشاركات:
    110
    الإعجابات المتلقاة:
    4
    نقاط الجائزة:
    18
    الإقامة:
    عـــدن
    رد: الأن | اجعل أزرار منتداك | بتقنية css3

    روعه والله موفق​
     
  4. Mr.Dm4r

    Mr.Dm4r Developer

    الأنتساب:
    ‏9 يوليو 2012
    المشاركات:
    3
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    1
    الوظيفة:
    Student
    الإقامة:
    K S A
    رد: الأن | اجعل أزرار منتداك | بتقنية css3

    يعطيكـ العاآآفيه
    يشرفني الرد على مواضيعكـ
    :{10}:​
     
  5. Mr.JoesPH

    Mr.JoesPH Developer

    الأنتساب:
    ‏16 يوليو 2012
    المشاركات:
    46
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    6
    الإقامة:
    مكة المكرمة
    رد: الأن | اجعل أزرار منتداك | بتقنية css3

    شكرا على الموضوع الرائع
    واصل
     
حالة الموضوع:
مغلق

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