There is the following code:

.btn { position: absolute; background-color: red; border-radius: 3px; text-decoration: none; animation: border-pulsate 2s infinite; border: 2px solid black; transition: .5s; } @keyframes border-pulsate { 0% { border-color: rgba(0, 0, 0, 1); } 50% { border-color: rgba(0, 0, 0, 0); } 100% { border-color: rgba(0, 0, 0, 1); } } 
 <a class="btn" href="#open-modal"><img src="https://image.flaticon.com/icons/svg/36/36601.svg"></a>

The link simply opens a modal window. How do I use javascript (or, if there is a way, CSS) when I click on the button to remove the border'a animation?

  • 3
    $('.btn').click(function(){$('.btn').css({"animation-name":"none"})}); Well, or animation-name replaced by border - user242433
  • Thank you, it works! - aloe
  • you are always welcome :) - user242433

4 answers 4

With css will be better than a crutch through Js

 var btn = document.querySelectorAll('.btn'); for (var i = 0; i < btn.length; i++) { btn[i].onclick = function(){this.style.animation = "none";} } 
 .btn { position: absolute; background-color: red; border-radius: 3px; text-decoration: none; animation: border-pulsate 2s infinite; border: 2px solid red; transition: .5s; box-sizing:border-box; } @keyframes border-pulsate { 0% { border-color: rgba(0, 0, 0, 1); } 50% { border-color: rgba(0, 0, 0, 0); } 100% { border-color: rgba(0, 0, 0, 1); } } 
 <a class="btn" href="#open-modal"><img src="https://image.flaticon.com/icons/svg/36/36601.svg"></a> 

     .btn:active{ border:none; }

    this is css option

       <a class="btn" href="#open-modal" onclick="this.style.border="none"></a>

        still as an option

         .btn { position: absolute; background-color: red; border-radius: 3px; text-decoration: none; animation: border-pulsate 2s infinite; border: 2px solid black; transition: .5s; } @keyframes border-pulsate { 0% { border-color: rgba(0, 0, 0, 1); } 50% { border-color: rgba(0, 0, 0, 0); } 100% { border-color: rgba(0, 0, 0, 1); } } .btn:focus{ animation: border-pulsate-stop 2s infinite; } @keyframes border-pulsate-stop { 0% { border-color: rgba(0, 0, 0, 0); } 100% { border-color: rgba(0, 0, 0, 0); } } 
         <a class="btn" href="#open-modal"><img src="https://image.flaticon.com/icons/svg/36/36601.svg"></a>