I draw such a button. The bottom line is that with the first click, naturally, it works :focus and all that is attributed to it, but with the next clicks it doesn’t, because the focus still remains. The question is how to make the event work with every click? CodePero

 @import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,300); body { background: #fafafa; text-align: center; } div { padding: 50px 0 0; } button:focus { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); animation: button .7s ease-in-out; } button:hover { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 2px 7px rgba(0, 0, 0, 0.2); } button { border: none; line-height: 40px; height: 40px; width: 150px; font-size: 20px; text-transform: uppercase; border-radius: 3px; font-family: 'Roboto Slab'; font-weight: lighter; background: #3F51B5; color: #eee; transition: all .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); outline: none; } @keyframes 'button' { from { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(63, 81, 181, 0.3); } to { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 0 0 20px rgba(63, 81, 181, 0); } } @-webkit-keyframes 'button' { from { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(63, 81, 181, 0.3); } to { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 0 0 20px transparent; } } 
 <div><button>button</button></div>

    1 answer 1

    Assign not to focus, but to exit from the active state.

     @import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,300); body { background: #fafafa; text-align: center; } div { padding: 50px 0 0; } button:focus { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); } button:focus:not(:active) { animation: button .7s ease-in-out; } button:hover { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 2px 7px rgba(0, 0, 0, 0.2); } button { border: none; line-height: 40px; height: 40px; width: 150px; font-size: 20px; text-transform: uppercase; border-radius: 3px; font-family: 'Roboto Slab'; font-weight: lighter; background: #3F51B5; color: #eee; transition: all .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); outline: none; } @keyframes 'button' { from { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(63, 81, 181, 0.3); } to { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 0 0 20px rgba(63, 81, 181, 0); } } @-webkit-keyframes 'button' { from { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(63, 81, 181, 0.3); } to { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 0 0 20px transparent; } } 
     <div><button>button</button></div>