زر 3D بإستخدام CSS لمدونات بلوجر

1 سبتمبر، 2021
زر 3D بإستخدام CSS لمدونات بلوجر

نقدم لكم زر html تم تجميله بإستخدام css يمكن إستخدامه في الكثير من الاشياء على المواقع وخصوصاً بلوجر تستطيع وضعه مثل زر للتحميل زر معاينة أو أي أشياء أخرى قد ترغب بها.


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

انقر للمشاهدة!



لإضافة هذا الزر لمدونتك ادخل لوحة التحكم ثم القالب ثم أنقر على تحرير html  ثم لصق الكود التالي فوق الرمز ]]></b:skin> ثم احفظ القالب

.a_demo_two {
    background-color:#6fba26;
    padding:10px;
    position:relative;
    font-family: 'Open Sans', sans-serif;
    font-size:12px;
    text-decoration:none;
    color:#fff;
    background-image: linear-gradient(bottom, rgb(100,170,30) 0%, rgb(129,212,51) 100%);
    box-shadow: inset 0px 1px 0px #b2f17f, 0px 6px 0px #3d6f0d;
    border-radius: 5px;
}

.a_demo_two:active {
    top:7px;
    background-image: linear-gradient(bottom, rgb(100,170,30) 100%, rgb(129,212,51) 0%);
    box-shadow: inset 0px 1px 0px #b2f17f, inset 0px -1px 0px #3d6f0d;
    color: #156785;
    text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
    background: rgb(44,160,202);
}
.a_demo_two::before {
    background-color:#072239;
    content:"";
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    padding-left:2px;
    padding-right:2px;
    padding-bottom:4px;
    left:-2px;
    top:5px;
    z-index:-1;
    border-radius: 6px;
    box-shadow: 0px 1px 0px #fff;
}

.a_demo_two:active::before {
    top:-2px;
}



ثم إستخدام الكود التالي داخل مواضيع مدونتك من خلال النقر على زر html بجانب زر التأليف في محرر المشاركات ثم لصق الكود التالي:

<a class="a_demo_two" href="http://www.demoo.madad2.com/" rel="nofollow" target="_blank"><span style="font-size: large;"><b>انقر للمشاهدة!</b></span></a>

أو إذا لم تكن ترغب بإضافة الكود الأول فوق الرمز ]]></b:skin> يمكنك نسخ الكود التالي بالكامل ولصقه داخل محرر المواضيع في مدونتك من خلال النقر على html:


<a class="a_demo_two" href="http://www.demoo.madad2.com/" rel="nofollow" target="_blank"><span style="font-size: large;"><b>انقر للمشاهدة!</b></span></a>
<style>
.a_demo_two {
    background-color:#6fba26;
    padding:10px;
    position:relative;
    font-family: 'Open Sans', sans-serif;
    font-size:12px;
    text-decoration:none;
    color:#fff;
    background-image: linear-gradient(bottom, rgb(100,170,30) 0%, rgb(129,212,51) 100%);
    box-shadow: inset 0px 1px 0px #b2f17f, 0px 6px 0px #3d6f0d;
    border-radius: 5px;
}

.a_demo_two:active {
    top:7px;
    background-image: linear-gradient(bottom, rgb(100,170,30) 100%, rgb(129,212,51) 0%);
    box-shadow: inset 0px 1px 0px #b2f17f, inset 0px -1px 0px #3d6f0d;
    color: #156785;
    text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
    background: rgb(44,160,202);
}
.a_demo_two::before {
    background-color:#072239;
    content:"";
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    padding-left:2px;
    padding-right:2px;
    padding-bottom:4px;
    left:-2px;
    top:5px;
    z-index:-1;
    border-radius: 6px;
    box-shadow: 0px 1px 0px #fff;
}

.a_demo_two:active::before {
    top:-2px;
}
</style>

لاي إستفسار لا تتردد في طلب المساعدة!


1 سبتمبر، 2021