الثلاثاء, أبريل 02, 2013

كيف تصنع وتضيف وتستخدم أزرار جميله جدا بتأثير CSS3 لمدونتك وتدويناتك على بلوجر

كلنا يستخدم الروابط فى تدويناتنا على بلوجر , وهناك روابط لها خصوصيه ولها أهميه كبيره , ويبحث الكثير منا عن وسيله ليجعل هذه الروابط متميزه , وذلك مثل إقرا المزيد والتعليق والمعاينات وما إلى غير ذلك .

تستطيع عمل هذه الروابط على شكل أزرار جميلة المظهر بتأثير CSS رائع وبأشكال متعدده لتختار ما يناسبك منها

كيف تحصل على هذه الأزرار

إذهب إلى أكواد HTML الخاصه بقالب مدونتك وفقط قم بالبحث عن الكود التالى
]]></b:skin>
وقبله مباشرة ضع الكود التالى
/*Gzero Buttons*/
.nw-btn {
    border-image: none;
    border-radius: 4px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    display: inline-block;
    font-size: 13px;
    font-family: Arial;
    line-height: 20px;
    margin: 0;
    padding: 4px 12px;
    text-align: center;
    vertical-align: middle;
    cursor:pointer;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-style: solid;
    border-width: 1px;
    color: #FFF !important;
    text-decoration: none !important;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
    -moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
    -webkit-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
    -o-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}
.nw-btn:hover {
    text-decoration: none !important;
}
.nw-btn:active {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
}
/*Blanco*/
.nw-btn.white {
    background: #F5F5F5 ;
    background-image: linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%) ;
    background-image: -o-linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%) ;
    background-image: -moz-linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%) ;
    background-image: -webkit-linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%) ;
    background-image: -ms-linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%) ;
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #E6E6E6),color-stop(1, #FFFFFF)) ;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #B3B3B3 !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75) !important;
    color: #333 !important;
}
.nw-btn.white:hover {background: #E6E6E6 ;}
/*Azul*/
.nw-btn.blue {
    background: #49AFCD;
    background-image: linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
    background-image: -o-linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
    background-image: -moz-linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
    background-image: -webkit-linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
    background-image: -ms-linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #2F95B4),color-stop(1, #5BC0DE));
}
.nw-btn.blue:hover {background:#2F96B4;}
/*Verde*/
.nw-btn.green {
    background: #5BB75B;
    background-image: linear-gradient(bottom, #51A351 0%, #62C462 100%);
    background-image: -o-linear-gradient(bottom, #51A351 0%, #62C462 100%);
    background-image: -moz-linear-gradient(bottom, #51A351 0%, #62C462 100%);
    background-image: -webkit-linear-gradient(bottom, #51A351 0%, #62C462 100%);
    background-image: -ms-linear-gradient(bottom, #51A351 0%, #62C462 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #51A351),color-stop(1, #62C462));
}
.nw-btn.green:hover {background:#51A351;}
/*Naranja*/
.nw-btn.orange {
    background: #FAA732 ;
    background-image: linear-gradient(bottom, #F89306 0%, #FBB450 100%) ;
    background-image: -o-linear-gradient(bottom, #F89306 0%, #FBB450 100%) ;
    background-image: -moz-linear-gradient(bottom, #F89306 0%, #FBB450 100%) ;
    background-image: -webkit-linear-gradient(bottom, #F89306 0%, #FBB450 100%) ;
    background-image: -ms-linear-gradient(bottom, #F89306 0%, #FBB450 100%) ;
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #F89306),color-stop(1, #FBB450)) ;
}
.nw-btn.orange:hover {background: #F89406 ;}
/*Rojo*/
.nw-btn.red {
    background: #DA4F49 ;
    background-image: linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%) ;
    background-image: -o-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%) ;
    background-image: -moz-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%) ;
    background-image: -webkit-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%) ;
    background-image: -ms-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%) ;
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #BD362F),color-stop(1, #EE5F5B)) ;
}
.nw-btn.red:hover {background: #BD362F ;}
/*Finish Gzero Buttons*/
ثم قم بحفظ القالب
والآن عندما ترغب بإظهار أى رابط على شكل زر فقط عدل فى كود الرابط
فالرابط فى الأساس عند التعديل على HTML الخاص بالتدوينه نجده بالشكل التالى
<a href="#">كلمات الرابط</a>
وعن رغبتنا فى جعله على شكل الزر نجعله بالشكل التالى
<a class="nw-btn white" href="#">كلمات الرابط</a>
أى أننا أضفنا الكود التالى إلى الكود الأصلى
class="nw-btn white"
وها هى أكواد الأزرار بألونها تستطيع أن تختار من بينها اللون المفضل لديك
<a class="nw-btn white" href="#">زر أبيض</a>
<a class="nw-btn red" href="#">زر أحمر</a>
<a class="nw-btn blue" href="#">زر أزرق</a>
<a class="nw-btn orange" href="#">زر برتقالى</a>
<a class="nw-btn Green" href="#">زر أخضر</a>
وبذلك تكون قد حصلت على أزرار رائعة المظهر وبكل سهوله عن طريق أكواد CSS البسيطه والرائعه .
من فضلك اضغظ لايك لمشاهدة لينك التحميل

9 تَعْلِيق:

  1. شكرا
    http://recherchergoogle.blogspot.com/

    ردحذف
  2. مشكور على الشرح اخي الكريم ..........
    http://adonia2.blogspot.com/

    ردحذف
  3. رائع جداً

    ________________
    http://aplaticos.blogspot.com

    ردحذف
  4. رائع
    http://mynewfiles.blogspot.com/

    ردحذف
  5. http://myebd3at.blogspot.com/
    مدونة ابداعاتى

    ردحذف
  6. شكر اخي هل تستطيع اضافة ايقونة للزر

    ردحذف