#e8e8e8
1.download-button { 2 position: relative; 3 border-width: 0; 4 color: white; 5 font-size: 15px; 6 font-weight: 600; 7 border-radius: 4px; 8 z-index: 1; 9} 10 11.download-button .docs { 12 display: flex; 13 align-items: center; 14 justify-content: space-between; 15 gap: 10px; 16 min-height: 40px; 17 padding: 0 10px; 18 border-radius: 4px; 19 z-index: 1; 20 background-color: #242a35; 21 border: solid 1px #e8e8e82d; 22 transition: all .5s cubic-bezier(0.77, 0, 0.175, 1); 23} 24 25.download-button:hover { 26 box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; 27} 28 29.download { 30 position: absolute; 31 inset: 0; 32 display: flex; 33 align-items: center; 34 justify-content: center; 35 max-width: 90%; 36 margin: 0 auto; 37 z-index: -1; 38 border-radius: 4px; 39 transform: translateY(0%); 40 background-color: #01e056; 41 border: solid 1px #01e0572d; 42 transition: all .5s cubic-bezier(0.77, 0, 0.175, 1); 43} 44 45.download-button:hover .download { 46 transform: translateY(100%) 47} 48 49.download svg polyline,.download svg line { 50 animation: docs 1s infinite; 51} 52 53@keyframes docs { 54 0% { 55 transform: translateY(0%); 56 } 57 58 50% { 59 transform: translateY(-15%); 60 } 61 62 100% { 63 transform: translateY(0%); 64 } 65}
16K views
16K views
Comments
Variations
1 MIT License