ouatech ouatech

آخر الأخبار

جاري التحميل ...

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

أضف لمدونتك زر تحميل بإستخدام CSS يظهر ويختفي بطريقة رائعة وجدابة
أضف لمدونتك زر تحميل بإستخدام 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="https://ouatech1.blogspot.com">انقر هنا</a>
</div>
تستطيع إضافته في أي مكان مدونتك أو من خلال القالب (محرر html) أو من التخطيط إضافة أداة ثم أداة javascript/html 
كما يمكن إضافتها في مواقع ووردبريس وحتى المنتديات إذا كنت بحاجة للمزيد من المساعدة الرجاء ترك تعليق.

اقرأ أيضا

عن الكاتب

abderrahim ouabou

التعليقات


اتصل بنا

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

جميع الحقوق محفوظة

ouatech