Animated Download Button


/ Published in: SASS
Save to your folder(s)

This code is to have an animated download button


Copy this code and paste it in your HTML
  1. .html:
  2.  
  3. <a href="http://www.ellsworthcreations.com/computers/RESUME_Software_Testing_Resume.pdf"
  4. class="buttonDownload" target="_blank">Download Resume</a>
  5.  
  6.  
  7.  
  8.  
  9. .scss:
  10.  
  11. .buttonDownload {
  12. font-family: Roboto,Helvetica Neue,sans-serif;
  13. border-radius: 4px;
  14. display: inline-block;
  15. position: relative;
  16. padding: 8px 23px;
  17. margin-left: 5px;
  18.  
  19. background-color: #303f9f;
  20. color: white;
  21.  
  22. font-family: sans-serif;
  23. text-decoration: none;
  24. font-size: 0.9em;
  25. text-align: center;
  26. text-indent: 15px;
  27. }
  28.  
  29. .buttonDownload:hover {
  30. background-color: #333;
  31. color: white;
  32. }
  33.  
  34. .buttonDownload:before, .buttonDownload:after {
  35. content: ' ';
  36. display: block;
  37. position: absolute;
  38. left: 15px;
  39. top: 52%;
  40. }
  41.  
  42. /* Download box shape */
  43. .buttonDownload:before {
  44. width: 10px;
  45. height: 2px;
  46. border-style: solid;
  47. border-width: 0 2px 2px;
  48. }
  49.  
  50. /* Download arrow shape */
  51. .buttonDownload:after {
  52. width: 0;
  53. height: 0;
  54. margin-left: 3px;
  55. margin-top: -7px;
  56.  
  57.  
  58. border-style: solid;
  59. border-width: 4px 4px 0 4px;
  60. border-color: transparent;
  61. border-top-color: inherit;
  62.  
  63. animation: downloadArrow 2s linear infinite;
  64. animation-play-state: paused;
  65. }
  66.  
  67. .buttonDownload:hover:before {
  68. border-color: #4CC713;
  69. }
  70.  
  71. .buttonDownload:hover:after {
  72. border-top-color: #4CC713;
  73. animation-play-state: running;
  74. }
  75.  
  76. /* keyframes for the download icon anim */
  77. @keyframes downloadArrow {
  78. /* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
  79. 0% {
  80. margin-top: -7px;
  81. opacity: 1;
  82. }
  83.  
  84. 0.001% {
  85. margin-top: -15px;
  86. opacity: 0;
  87. }
  88.  
  89. 50% {
  90. opacity: 1;
  91. }
  92.  
  93. 100% {
  94. margin-top: 0;
  95. opacity: 0;
  96. }
  97. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.