أحدث المواضيع

أضف لمدونتك زر بإستخدام 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 
كما يمكن إضافتها في مواقع ووردبريس وحتى المنتديات إذا كنت بحاجة للمزيد من المساعدة الرجاء ترك تعليق.

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

تذكر قوله تعالى:
(( مَا يَلْفِظُ مِنْ قَوْلٍ إِلَّا لَدَيْهِ رَقِيبٌ عَتِيدٌ)) ‏
-----------------------------------
الان يمكنك اضافة اي مقطع فيديو الى التعليقات وايضا اضافة الصور فقط ضع رابط الصور او مقطع الفيديو في التعليقات
----------------------------------
آرائكم تسعدنا, لمتابعة التعليق حتى نرد عليك فقط ضع إشارة على إعلامي

نحن نعرض الإعلانات على الموقع للإسهام في تحسين موقعنا.

نحن لانستخدم إعلانات ضارة او مزعجة في موقعنا نأمل منكم تعطيل الاداة في الموقع حتى تتمكن من مشاهدة الإعلانات.

شكرًا لك

×