/ Published in: SASS
This code is to have an animated download button
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
.html: <a href="http://www.ellsworthcreations.com/computers/RESUME_Software_Testing_Resume.pdf" class="buttonDownload" target="_blank">Download Resume</a> .scss: .buttonDownload { font-family: Roboto,Helvetica Neue,sans-serif; border-radius: 4px; display: inline-block; position: relative; padding: 8px 23px; margin-left: 5px; background-color: #303f9f; 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; animation: downloadArrow 2s linear infinite; animation-play-state: paused; } .buttonDownload:hover:before { border-color: #4CC713; } .buttonDownload:hover:after { border-top-color: #4CC713; animation-play-state: running; } /* keyframes for the download icon anim */ @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; } }