Why aren't my animation pseudo-elements working with an input element? [duplicate]

.buttonDownload { display: inline-block; border: none; position: relative; padding: 10px 25px; background-color: #4CC713; color: white; font-family: sans-serif; text-decoration: none; font-size: 0.9em; text-align: center; text-indent: 15px; } .buttonDownload:hover { background-color: #333; color: white; } .buttonDownload:before, .buttonDownload:after { content: ' '; display: block; position: absolute; left: 15px; top: 52%; } /* Download box shape */ .buttonDownload:before { width: 10px; height: 2px; border-style: solid; border-width: 0 2px 2px; } /* Download arrow shape */ .buttonDownload:after { width: 0; height: 0; margin-left: 3px; margin-top: -7px; border-style: solid; border-width: 4px 4px 0 4px; border-color: transparent; border-top-color: inherit; -webkit-animation: downloadArrow 2s linear infinite; animation: downloadArrow 2s linear infinite; -webkit-animation-play-state: paused; animation-play-state: paused; } .buttonDownload:hover:before { border-color: #4CC713; } .buttonDownload:hover:after { border-top-color: #4CC713; -webkit-animation-play-state: running; animation-play-state: running; } /* keyframes for the download icon anim */ @-webkit-keyframes downloadArrow { /* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */ 0% { margin-top: -7px; opacity: 1; } 0.001% { margin-top: -15px; opacity: 0; } 50% { opacity: 1; } 100% { margin-top: 0; opacity: 0; } } @keyframes downloadArrow { /* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */ 0% { margin-top: -7px; opacity: 1; } 0.001% { margin-top: -15px; opacity: 0; } 50% { opacity: 1; } 100% { margin-top: 0; opacity: 0; } }

<form action="" method="POST"> <div class="g-recaptcha" data-sitekey="your_site_key"></div> <br/> <input type="submit" value="Download" class="buttonDownload"> </form>