Wie mache ich eine Knopfanimation?

Question

Ich habe eine Schaltfläche wie für ein Video-Popup und möchte eine Animation Wellen um ihn herum, wie kann ich es leicht machen? Schlage ein paar tuts oder Links mit Beispiel pls hier meine Taste ist:

<div class="promo__play"> 
         <div class="promo__play__content"> 
          <div class="promo__play__content__item"> 
           <div class="promo__play__circle"> 
           <svg 
            xmlns:dc="http://purl.org/dc/elements/1.1/" 
            xmlns:cc="http://creativecommons.org/ns#" 
            xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
            xmlns:svg="http://www.w3.org/2000/svg" 
            xmlns="http://www.w3.org/2000/svg" 
            version="1.1" 
            id="svg2" 
            viewBox="0 0 36.791115 35.594635" 
            height="10.045597mm" 
            width="10.38327mm"> 
            <defs id="defs4" /> 

            <g transform="translate(-259.89283,-386.89359)" id="layer1"> 
             <path id="path3369" 
              d="m 260.39283,421.68361 0,-34 35.14288,16.64288 z" 
              style="fill:#0e91a0;fill-opacity:1;fill-rule:evenodd;stroke:#0e91a0;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /> 
            </g> 
           </svg> 
           <div class="promo__play__text">Watch</div> 
           </div> 
          </div> 
         </div> 
        </div> 

.promo__play { 
    display: table; 
    width: 100%; 
} 
.promo__play__content { 
    display: table-row; 
} 


.promo__play__content__item { 
    height: 350px; 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
} 


.promo__play__text { 
    color: #0e91a0; 
    font-size: 14px; 
    font-weight: bold; 
    margin-top: 10px; 
} 


.promo__play__circle { 
    padding-top: 45px; 
    padding-left: 10px; 
    border-radius: 50%; 
    display: inline-block; 
    cursor: pointer; 
    vertical-align: middle; 
    background-color: #fff; 
    width: 140px; 
    height: 140px; 
} 

Hier ist meine Schaltfläche: https://jsfiddle.net/d8fzy7kx/

Answer 1

Sie können diese Wellen erzeugen mehr mit box-shadow geschichtet aufeinander in Eins. Sie können diese mit Hilfe von CSS Keyframes animieren dann animation: ripple 1000ms infinite;

@keyframes ripple { 
    0% { 
    box-shadow: 0 0 0 0px #4444ee, 0 0 0 0px #fff, 
    0 0 0 0px #4444ee, 0 0 0 0px #fff, 
    0 0 0 0px #4444ee, 0 0 0 0px #fff, 
    0 0 0 0px #4444ee, 0 0 0 0px #fff; 
    } 
    100% { 
    box-shadow: 0 0 0 15px #4444ee, 0 0 0 17px rgba(255,255,255,0), 
    0 0 0 40px #4444ee, 0 0 0 42px rgba(255,255,255,0), 
    0 0 0 70px #4444ee, 0 0 0 72px rgba(255,255,255,0), 
    0 0 0 105px #4444ee, 0 0 0 107px rgba(255,255,255,0); 
    } 
} 

ich eine Arbeits jsFiddle hier erstellt haben: https://jsfiddle.net/qhudcgex/1/

Answer 2

Sie diese mögen:

.container { 
 
    width: 200px; 
 
    height: 100%; 
 
    margin: 0 auto 0; 
 
} 
 

 
.pulse-button { 
 

 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: none; 
 
    box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7); 
 
    border-radius: 50%; 
 
    background-color: #e84c3d; 
 
    background-image: url(http://www.clipartbest.com/cliparts/bTy/EkL/bTyEkLGrc.png); 
 
    background-size:cover; 
 
    background-repeat: no-repeat; 
 
    cursor: pointer; 
 
    -webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1); 
 
    -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1); 
 
    -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1); 
 
    animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1); 
 
} 
 
.pulse-button:hover 
 
{ 
 
    -webkit-animation: none;-moz-animation: none;-ms-animation: none;animation: none; 
 
} 
 

 
@-webkit-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}} 
 
@-moz-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}} 
 
@-ms-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}} 
 
@keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}

<div class="container"> 
 
    <button class="pulse-button"></button> 
 
</div>