Button by d3uceY
#000000
1.download-btn { 2 height: 45px; 3 width: 95px; 4 cursor: pointer; 5 background: white; 6 border: none; 7 background: #8080ff; 8 border-radius: 30px; 9 overflow: hidden; 10} 11 12.button-content { 13 transform: translateY(-45px); 14 transition: all 250ms ease-in-out; 15} 16 17.svg-container, 18.text-container { 19 height: 45px; 20 width: 100%; 21 display: flex; 22 justify-content: center; 23 align-items: center; 24} 25 26.text-container .text { 27 font-size: 13px; 28 color: #fff; 29 font-weight: 600; 30 opacity: 1; 31 transition: opacity ease-in-out 250ms; 32} 33 34.download-icon { 35 height: 25px; 36 width: 25px; 37 fill: #fff; 38 opacity: 0; 39 transition: opacity ease-in-out 250ms; 40} 41 42/* hover state for the button */ 43.download-btn:hover .button-content { 44 transform: translateY(0px); 45} 46 47.download-btn:hover .text { 48 opacity: 0; 49} 50 51.download-btn:hover .download-icon { 52 opacity: 1; 53} 54 55.download-btn:focus .download-icon { 56 -webkit-animation: heartbeat 1.5s ease-in-out infinite both; 57 animation: heartbeat 1.5s ease-in-out infinite both; 58} 59 60@-webkit-keyframes heartbeat { 61 from { 62 -webkit-transform: scale(1); 63 transform: scale(1); 64 -webkit-transform-origin: center center; 65 transform-origin: center center; 66 -webkit-animation-timing-function: ease-out; 67 animation-timing-function: ease-out; 68 } 69 10% { 70 -webkit-transform: scale(0.91); 71 transform: scale(0.91); 72 -webkit-animation-timing-function: ease-in; 73 animation-timing-function: ease-in; 74 } 75 17% { 76 -webkit-transform: scale(0.98); 77 transform: scale(0.98); 78 -webkit-animation-timing-function: ease-out; 79 animation-timing-function: ease-out; 80 } 81 33% { 82 -webkit-transform: scale(0.87); 83 transform: scale(0.87); 84 -webkit-animation-timing-function: ease-in; 85 animation-timing-function: ease-in; 86 } 87 45% { 88 -webkit-transform: scale(1); 89 transform: scale(1); 90 -webkit-animation-timing-function: ease-out; 91 animation-timing-function: ease-out; 92 } 93} 94@keyframes heartbeat { 95 from { 96 -webkit-transform: scale(1); 97 transform: scale(1); 98 -webkit-transform-origin: center center; 99 transform-origin: center center; 100 -webkit-animation-timing-function: ease-out; 101 animation-timing-function: ease-out; 102 } 103 10% { 104 -webkit-transform: scale(0.91); 105 transform: scale(0.91); 106 -webkit-animation-timing-function: ease-in; 107 animation-timing-function: ease-in; 108 } 109 17% { 110 -webkit-transform: scale(0.98); 111 transform: scale(0.98); 112 -webkit-animation-timing-function: ease-out; 113 animation-timing-function: ease-out; 114 } 115 33% { 116 -webkit-transform: scale(0.87); 117 transform: scale(0.87); 118 -webkit-animation-timing-function: ease-in; 119 animation-timing-function: ease-in; 120 } 121 45% { 122 -webkit-transform: scale(1); 123 transform: scale(1); 124 -webkit-animation-timing-function: ease-out; 125 animation-timing-function: ease-out; 126 } 127} 128 129/* hover state for the button */ 130
53 views
Variation of abutton
MIT License