أضف لمدونتك زر بإستخدام CSS يظهر ويختفي بطريقة رائعة


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



كود الزر:
<style>
.contacta1 a {
    float:left;
    font-size: 18px;
    font-style: italic;
    margin: 40px 40px 40px 300px;
    padding: 60px 20px;
    border: 3px solid #e1e1e1;
    background: red;
    border-radius: 80px;
    color: #fff;
    box-shadow: 4px 4px 6px rgba(0,0,0,0.30);
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#e1e1e1', Direction=145, Strength=5);
    animation: pulso 4s ease-out;
    animation-iteration-count: infinite; 
    -ms-animation: pulso 4s ease-out;
    -ms-animation-iteration-count: infinite; 
    -webkit-animation: pulso 4s ease-out;
    -webkit-animation-iteration-count: infinite; 
    opacity: 0.0;   
}
@-webkit-keyframes pulso {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}
@keyframes pulso {
    50% {opacity: 1.0;}
    100% {transform: scale(1.2, 1.2); opacity: 0.0;}
    0% {-ms-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-ms-transform: scale(1.2, 1.2); opacity: 0.0;}
    0% {transform: scale(0.1, 0.1); opacity: 0.0;}
}
.contacta1 a:hover {
    animation-play-state:paused; 
    -webkit-animation-play-state:paused;
    -ms-animation-play-state:paused; 
     background: green;
}
</style>

<div class="contacta1">
<a href="http://www.madad2.com/">انقر هنا</a>
</div>
تستطيع إضافته في أي مكان مدونتك أو من خلال القالب (محرر html) أو من التخطيط إضافة أداة ثم أداة javascript/html 
كما يمكن إضافتها في مواقع ووردبريس وحتى المنتديات إذا كنت بحاجة للمزيد من المساعدة الرجاء ترك تعليق.

مشاركات أقدم المقال التالي
لا يوجد تعليقات
أضف تعليق
عنوان التعليق