admin
10-30-2013, بتوقيت غرينيتش 09:43 PM
http://www.dzbatna.com/images/icons/iconrote.gif ط§ظ„ط£ظ† | ط§ط¬ط¹ظ„ ط£ط²ط±ط§ط± ظ…ظ†طھط¯ط§ظƒ | ط¨طھظ‚ظ†ظٹط© CSS3 (http://www.dzbatna.com/t2101005/)
http://upload.dzbatna.net/upfiles/zyf78743.png
http://upload.dzbatna.net/upfiles/qNt79904.png
اليوم اقدم لڪم حرڪة رائعة و بتقنية CSS 3
لأزرار المنتدى forum ، يعني رح يتغير ازرار المنتدى forum بشكل جزري
وهذا الحرڪة ممكن ما شايفها بحياتڪ
http://upload.dzbatna.net/upfiles/qNt79904.png
,المثال،
http://upload.dzbatna.net/upfiles/Gab79312.gif
قبل الضغط :
http://upload.dzbatna.net/upfiles/9q679354.jpg
بعد الضغط :
http://upload.dzbatna.net/upfiles/yzF79772.jpg
,الڪود،
اللون الأزرق
رمز Code:
.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; }
اللون الأحمر
رمز Code:
.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; }
اللون الأخضر
رمز Code:
.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; }
اللون الزهري
رمز Code:
.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; }
اللون البرتقالي
رمز Code:
.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; }
اللون الرصاصي
رمز Code:
.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 الرئيسي للاستايل style اللي تريد التطبيق عليه
و تنزل أسفل الصفحة وتشوف 2 مربع ڪبار
الصق الڪود في المربع الثاني
واحفظ ومبروڪ
http://upload.dzbatna.net/upfiles/qNt79904.png
جميع الحقوق محفوظة لمنتديات ديزاد باتنة
و شرڪة ديتورز لخدمات الويب المتڪاملة
w w w . d i t o r z . c o m
© 2014
http://upload.dzbatna.net/upfiles/7NS82130.png (http://www.ditorz.com)
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
http://upload.dzbatna.net/upfiles/zyf78743.png
http://upload.dzbatna.net/upfiles/qNt79904.png
اليوم اقدم لڪم حرڪة رائعة و بتقنية CSS 3
لأزرار المنتدى forum ، يعني رح يتغير ازرار المنتدى forum بشكل جزري
وهذا الحرڪة ممكن ما شايفها بحياتڪ
http://upload.dzbatna.net/upfiles/qNt79904.png
,المثال،
http://upload.dzbatna.net/upfiles/Gab79312.gif
قبل الضغط :
http://upload.dzbatna.net/upfiles/9q679354.jpg
بعد الضغط :
http://upload.dzbatna.net/upfiles/yzF79772.jpg
,الڪود،
اللون الأزرق
رمز Code:
.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; }
اللون الأحمر
رمز Code:
.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; }
اللون الأخضر
رمز Code:
.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; }
اللون الزهري
رمز Code:
.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; }
اللون البرتقالي
رمز Code:
.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; }
اللون الرصاصي
رمز Code:
.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 الرئيسي للاستايل style اللي تريد التطبيق عليه
و تنزل أسفل الصفحة وتشوف 2 مربع ڪبار
الصق الڪود في المربع الثاني
واحفظ ومبروڪ
http://upload.dzbatna.net/upfiles/qNt79904.png
جميع الحقوق محفوظة لمنتديات ديزاد باتنة
و شرڪة ديتورز لخدمات الويب المتڪاملة
w w w . d i t o r z . c o m
© 2014
http://upload.dzbatna.net/upfiles/7NS82130.png (http://www.ditorz.com)
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
