أضف لمدونتك زر بإستخدام 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>