طريقة عمل تاثيرات علي الازرار والقوائم بتقنية ال 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl7_PTgLiIFWokCNlGTRTFBKSYyOLH6RzzwiHUucWwZmwe1y3MHPQIVhe9H8N39IY7E90XpZ1E58C4lGJaKM6Zm_JTLJzVUGG4GfMYUV1OVUQULI0yWYIB2TFUycA1j0VWnpcRi3wAI3vl/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl7_PTgLiIFWokCNlGTRTFBKSYyOLH6RzzwiHUucWwZmwe1y3MHPQIVhe9H8N39IY7E90XpZ1E58C4lGJaKM6Zm_JTLJzVUGG4GfMYUV1OVUQULI0yWYIB2TFUycA1j0VWnpcRi3wAI3vl/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl7_PTgLiIFWokCNlGTRTFBKSYyOLH6RzzwiHUucWwZmwe1y3MHPQIVhe9H8N39IY7E90XpZ1E58C4lGJaKM6Zm_JTLJzVUGG4GfMYUV1OVUQULI0yWYIB2TFUycA1j0VWnpcRi3wAI3vl/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl7_PTgLiIFWokCNlGTRTFBKSYyOLH6RzzwiHUucWwZmwe1y3MHPQIVhe9H8N39IY7E90XpZ1E58C4lGJaKM6Zm_JTLJzVUGG4GfMYUV1OVUQULI0yWYIB2TFUycA1j0VWnpcRi3wAI3vl/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl7_PTgLiIFWokCNlGTRTFBKSYyOLH6RzzwiHUucWwZmwe1y3MHPQIVhe9H8N39IY7E90XpZ1E58C4lGJaKM6Zm_JTLJzVUGG4GfMYUV1OVUQULI0yWYIB2TFUycA1j0VWnpcRi3wAI3vl/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl7_PTgLiIFWokCNlGTRTFBKSYyOLH6RzzwiHUucWwZmwe1y3MHPQIVhe9H8N39IY7E90XpZ1E58C4lGJaKM6Zm_JTLJzVUGG4GfMYUV1OVUQULI0yWYIB2TFUycA1j0VWnpcRi3wAI3vl/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl7_PTgLiIFWokCNlGTRTFBKSYyOLH6RzzwiHUucWwZmwe1y3MHPQIVhe9H8N39IY7E90XpZ1E58C4lGJaKM6Zm_JTLJzVUGG4GfMYUV1OVUQULI0yWYIB2TFUycA1j0VWnpcRi3wAI3vl/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl7_PTgLiIFWokCNlGTRTFBKSYyOLH6RzzwiHUucWwZmwe1y3MHPQIVhe9H8N39IY7E90XpZ1E58C4lGJaKM6Zm_JTLJzVUGG4GfMYUV1OVUQULI0yWYIB2TFUycA1j0VWnpcRi3wAI3vl/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl7_PTgLiIFWokCNlGTRTFBKSYyOLH6RzzwiHUucWwZmwe1y3MHPQIVhe9H8N39IY7E90XpZ1E58C4lGJaKM6Zm_JTLJzVUGG4GfMYUV1OVUQULI0yWYIB2TFUycA1j0VWnpcRi3wAI3vl/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl7_PTgLiIFWokCNlGTRTFBKSYyOLH6RzzwiHUucWwZmwe1y3MHPQIVhe9H8N39IY7E90XpZ1E58C4lGJaKM6Zm_JTLJzVUGG4GfMYUV1OVUQULI0yWYIB2TFUycA1j0VWnpcRi3wAI3vl/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl7_PTgLiIFWokCNlGTRTFBKSYyOLH6RzzwiHUucWwZmwe1y3MHPQIVhe9H8N39IY7E90XpZ1E58C4lGJaKM6Zm_JTLJzVUGG4GfMYUV1OVUQULI0yWYIB2TFUycA1j0VWnpcRi3wAI3vl/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl7_PTgLiIFWokCNlGTRTFBKSYyOLH6RzzwiHUucWwZmwe1y3MHPQIVhe9H8N39IY7E90XpZ1E58C4lGJaKM6Zm_JTLJzVUGG4GfMYUV1OVUQULI0yWYIB2TFUycA1j0VWnpcRi3wAI3vl/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl7_PTgLiIFWokCNlGTRTFBKSYyOLH6RzzwiHUucWwZmwe1y3MHPQIVhe9H8N39IY7E90XpZ1E58C4lGJaKM6Zm_JTLJzVUGG4GfMYUV1OVUQULI0yWYIB2TFUycA1j0VWnpcRi3wAI3vl/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl7_PTgLiIFWokCNlGTRTFBKSYyOLH6RzzwiHUucWwZmwe1y3MHPQIVhe9H8N39IY7E90XpZ1E58C4lGJaKM6Zm_JTLJzVUGG4GfMYUV1OVUQULI0yWYIB2TFUycA1j0VWnpcRi3wAI3vl/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl7_PTgLiIFWokCNlGTRTFBKSYyOLH6RzzwiHUucWwZmwe1y3MHPQIVhe9H8N39IY7E90XpZ1E58C4lGJaKM6Zm_JTLJzVUGG4GfMYUV1OVUQULI0yWYIB2TFUycA1j0VWnpcRi3wAI3vl/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl7_PTgLiIFWokCNlGTRTFBKSYyOLH6RzzwiHUucWwZmwe1y3MHPQIVhe9H8N39IY7E90XpZ1E58C4lGJaKM6Zm_JTLJzVUGG4GfMYUV1OVUQULI0yWYIB2TFUycA1j0VWnpcRi3wAI3vl/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl7_PTgLiIFWokCNlGTRTFBKSYyOLH6RzzwiHUucWwZmwe1y3MHPQIVhe9H8N39IY7E90XpZ1E58C4lGJaKM6Zm_JTLJzVUGG4GfMYUV1OVUQULI0yWYIB2TFUycA1j0VWnpcRi3wAI3vl/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl7_PTgLiIFWokCNlGTRTFBKSYyOLH6RzzwiHUucWwZmwe1y3MHPQIVhe9H8N39IY7E90XpZ1E58C4lGJaKM6Zm_JTLJzVUGG4GfMYUV1OVUQULI0yWYIB2TFUycA1j0VWnpcRi3wAI3vl/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl7_PTgLiIFWokCNlGTRTFBKSYyOLH6RzzwiHUucWwZmwe1y3MHPQIVhe9H8N39IY7E90XpZ1E58C4lGJaKM6Zm_JTLJzVUGG4GfMYUV1OVUQULI0yWYIB2TFUycA1j0VWnpcRi3wAI3vl/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl7_PTgLiIFWokCNlGTRTFBKSYyOLH6RzzwiHUucWwZmwe1y3MHPQIVhe9H8N39IY7E90XpZ1E58C4lGJaKM6Zm_JTLJzVUGG4GfMYUV1OVUQULI0yWYIB2TFUycA1j0VWnpcRi3wAI3vl/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl7_PTgLiIFWokCNlGTRTFBKSYyOLH6RzzwiHUucWwZmwe1y3MHPQIVhe9H8N39IY7E90XpZ1E58C4lGJaKM6Zm_JTLJzVUGG4GfMYUV1OVUQULI0yWYIB2TFUycA1j0VWnpcRi3wAI3vl/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl7_PTgLiIFWokCNlGTRTFBKSYyOLH6RzzwiHUucWwZmwe1y3MHPQIVhe9H8N39IY7E90XpZ1E58C4lGJaKM6Zm_JTLJzVUGG4GfMYUV1OVUQULI0yWYIB2TFUycA1j0VWnpcRi3wAI3vl/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl7_PTgLiIFWokCNlGTRTFBKSYyOLH6RzzwiHUucWwZmwe1y3MHPQIVhe9H8N39IY7E90XpZ1E58C4lGJaKM6Zm_JTLJzVUGG4GfMYUV1OVUQULI0yWYIB2TFUycA1j0VWnpcRi3wAI3vl/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl7_PTgLiIFWokCNlGTRTFBKSYyOLH6RzzwiHUucWwZmwe1y3MHPQIVhe9H8N39IY7E90XpZ1E58C4lGJaKM6Zm_JTLJzVUGG4GfMYUV1OVUQULI0yWYIB2TFUycA1j0VWnpcRi3wAI3vl/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl7_PTgLiIFWokCNlGTRTFBKSYyOLH6RzzwiHUucWwZmwe1y3MHPQIVhe9H8N39IY7E90XpZ1E58C4lGJaKM6Zm_JTLJzVUGG4GfMYUV1OVUQULI0yWYIB2TFUycA1j0VWnpcRi3wAI3vl/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl7_PTgLiIFWokCNlGTRTFBKSYyOLH6RzzwiHUucWwZmwe1y3MHPQIVhe9H8N39IY7E90XpZ1E58C4lGJaKM6Zm_JTLJzVUGG4GfMYUV1OVUQULI0yWYIB2TFUycA1j0VWnpcRi3wAI3vl/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl7_PTgLiIFWokCNlGTRTFBKSYyOLH6RzzwiHUucWwZmwe1y3MHPQIVhe9H8N39IY7E90XpZ1E58C4lGJaKM6Zm_JTLJzVUGG4GfMYUV1OVUQULI0yWYIB2TFUycA1j0VWnpcRi3wAI3vl/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl7_PTgLiIFWokCNlGTRTFBKSYyOLH6RzzwiHUucWwZmwe1y3MHPQIVhe9H8N39IY7E90XpZ1E58C4lGJaKM6Zm_JTLJzVUGG4GfMYUV1OVUQULI0yWYIB2TFUycA1j0VWnpcRi3wAI3vl/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl7_PTgLiIFWokCNlGTRTFBKSYyOLH6RzzwiHUucWwZmwe1y3MHPQIVhe9H8N39IY7E90XpZ1E58C4lGJaKM6Zm_JTLJzVUGG4GfMYUV1OVUQULI0yWYIB2TFUycA1j0VWnpcRi3wAI3vl/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl7_PTgLiIFWokCNlGTRTFBKSYyOLH6RzzwiHUucWwZmwe1y3MHPQIVhe9H8N39IY7E90XpZ1E58C4lGJaKM6Zm_JTLJzVUGG4GfMYUV1OVUQULI0yWYIB2TFUycA1j0VWnpcRi3wAI3vl/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl7_PTgLiIFWokCNlGTRTFBKSYyOLH6RzzwiHUucWwZmwe1y3MHPQIVhe9H8N39IY7E90XpZ1E58C4lGJaKM6Zm_JTLJzVUGG4GfMYUV1OVUQULI0yWYIB2TFUycA1j0VWnpcRi3wAI3vl/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl7_PTgLiIFWokCNlGTRTFBKSYyOLH6RzzwiHUucWwZmwe1y3MHPQIVhe9H8N39IY7E90XpZ1E58C4lGJaKM6Zm_JTLJzVUGG4GfMYUV1OVUQULI0yWYIB2TFUycA1j0VWnpcRi3wAI3vl/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl7_PTgLiIFWokCNlGTRTFBKSYyOLH6RzzwiHUucWwZmwe1y3MHPQIVhe9H8N39IY7E90XpZ1E58C4lGJaKM6Zm_JTLJzVUGG4GfMYUV1OVUQULI0yWYIB2TFUycA1j0VWnpcRi3wAI3vl/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.

 

يسمح لكم بنقل الموضوع بشرط ذكر المصدر : طريقة عمل تاثيرات علي الازرار والقوائم بتقنية ال css3 المميزه | TATWEERWEB

 

ساهم في نشر الموضوع ولك جزيل الشكر !

أضف تعليقك عن طريق الفيسبوك :

اضافات بلوجر, اضافات css