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