طريقة عمل تاثيرات علي الازرار والقوائم بتقنية ال css3 المميزه

السلام عليكم ورحمة الله وبركاتة .. درس اليوم استكمالا لسلسلة دروس كنت قد انتويت وضعها هنا للوصول ان شاء الله تعالي بمدونتك نحو الاحتراف والتصميم الجيد والشكل الانيق .. درس اليوم عباره عن اضافة تستطيع من خلالها عمل تاثيرات رائعه ومتميزه علي جميع الازرار الموجوده في مدونتك وكذلك القوائم كما يمكن استخدامها بديلا للايقونات المصوره كايقونة التحميل او المشاهده .. الخ وذلك بتقنية ال css3 الغنية عن التعريف . ولرؤية مثال حى يمكنك قائمة الروابط الموجوده في منطقة الهيدر بمدونتي اضافة اليوم موجوده متوفره بثلاث احجام كما هو موجود في المثال المرفق تستطيع التبديل بينهم كيفما شئت ..
والان ناتي لتطبيق تلك الاضافه علي مدونة بلوجر : قم بالذهاب الي لوحة التحكم ثم الي تحرير HTML
قم بالبحث داخل قالب مدونتك عن  ]]></b:skin> وضع قبله مباشرة الكود الموجود بالاسفل :
.button{
    font:15px Calibri, Arial, sans-serif;
    text-shadow:1px 1px 0 rgba(255,255,255,0.4);
    text-decoration:none !important;
    white-space:nowrap;
    display:inline-block;
    vertical-align:baseline;
    position:relative;
    cursor:pointer;
    padding:10px 20px;
    background-repeat:no-repeat;
    background-position:bottom left;
    background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png');
    background-position:bottom left, top right, 0 0, 0 0;
    background-clip:border-box;   
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;       
    -moz-box-shadow:0 0 1px #fff inset;
    -webkit-box-shadow:0 0 1px #fff inset;
    box-shadow:0 0 1px #fff inset;
    -webkit-transition:background-position 1s;
    -moz-transition:background-position 1s;
    transition:background-position 1s;
}
.button:hover{
    background-position:top left;
    background-position:top left, bottom right, 0 0, 0 0;
}
.button:active{
    bottom:-1px;
}

/* The three buttons sizes */

.button.big    { font-size:30px;}
.button.medium    { font-size:18px;}
.button.small    { font-size:13px;}

/* BlueButton */

.blue.button{
    color:#0f4b6d !important;
    border:1px solid #84acc3 !important;
    background-color: #48b5f2;
    background-image:    url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'),
    -moz-radial-gradient(    center bottom, circle,
    rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
    -moz-linear-gradient(#4fbbf7, #3faeeb);
    background-image:    url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'),
    -webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
    from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
    -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}
.blue.button:hover{
    background-color:#63c7fe;
    background-image:    url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'),
    -moz-radial-gradient(    center bottom, circle,
    rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
    -moz-linear-gradient(#63c7fe, #58bef7);
    background-image:    url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'),
    -webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
    from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
    -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}

/* Green Button */

.green.button{
    color:#345903 !important;
    border:1px solid #96a37b !important;   
    background-color: #79be1e;
    background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
    background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}
.green.button:hover{
    background-color:#89d228;
    background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
    background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}

/* Orange Button */

.orange.button{
    color:#693e0a !important;
    border:1px solid #bea280 !important;   
    background-color: #e38d27;
    background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
    background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}
.orange.button:hover{
    background-color:#ec9732;
    background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
    background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}

/* Orange Button */

.gray.button{
    color:#525252 !important;
    border:1px solid #a5a5a5 !important;   
    background-color: #a9adb1;   
    background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
    background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}
.gray.button:hover{
    background-color:#b6bbc0;
    background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
    background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}
 الان ناتى للجزء الاخير وهو الروابط

الحجم الكبير
<a class="button big blue" href="LINK">LINKNAME</a>
<a class="button big green" href="LINK">LINKNAME</a>
<a class="button big orange" href="LINK">LINKNAME</a>
<a class="button big gray" href="LINK">LINKNAME</a>
الحجم المتوسط
<a class="button blue medium" href="LINK">LINKNAME</a>
<a class="button green medium" href="LINK">LINKNAME</a>
<a class="button orange medium" href="LINK">LINKNAME</a>
<a class="button gray medium" href="LINK">LINKNAME</a>
الحجم الصغير
<a class="button small blue" href="LINK">LINKNAME</a>
<a class="button small green" href="LINK">LINKNAME</a>
<a class="button small orange" href="LINK">LINKNAME</a>
<a class="button small gray" href="LINK">LINKNAME</a>

ملحوظة : قم بتغيير LINK  بالرابط الذي ترغب فيه وتغيير LINKNAME بالاسم المؤدي الرابط اليه..
كرر تلك العمليه مع الروابط الاربعه .. وتذكر انك يمكنك التبديل بين الاحجام عن طريق المتغير small و medium و big.
أصدقاء(تطوير ويب)
تعليقات Facebook
6تعليقات Blogger

6 عدد التعليقات على موضوع طريقة عمل تاثيرات علي الازرار والقوائم بتقنية ال css3 المميزه

Ali Alsayd يقول...

ازرار رائعه ابدعت اخي أحمد.. ومبروك الاستايل الجديد لموقعك مرره كلاسيكي و رائع على البركه.

tqarob weblog يقول...

@ عبد الجليل .. عفوا اخي مرورك هو الاروع شاكر لك متابعتك
@ ali alsayed .. الله يبارك فيك ياعلي وعلي فكره ده الستايل القديم لكن غيرت فيه شويه عشان يبق اسهل في تصفح المواضيع , تحياتي لك

عبدالله المالكي مدونة المرصد الصحافي يقول...

شكرا أخي أحمد
لكن بالنسبة للجزء الأخير هو الروابط أين يتم وضعه؟

واب ويب يقول...

الأخ الكريم شكرا لك على الإضافات المميزة

لكنك لم تجب على أسئلتنا

الان ناتى للجزء الاخير وهو الروابط ماذا تقصد بهذا

إرسال تعليق

التعليقات متاحه لمستخدمي حساب جوجل فقط.ولاضافة كود: أستعن بهذه الأداة السريعة Encode/HTML .