Button by barisdogansutcu
#212121
1.download-button { 2 position: relative; 3 border-width: 0; 4 color: rgb(19, 19, 19); 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: #ffffff; 21 border: solid 1px #e8e8e82d; 22 transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1); 23} 24 25.download-button:hover { 26 box-shadow: rgba(233, 233, 233, 0.555) 0px 54px 55px, 27 rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, 28 rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; 29} 30 31.download { 32 position: absolute; 33 inset: 0; 34 display: flex; 35 align-items: center; 36 justify-content: center; 37 max-width: 90%; 38 margin: 0 auto; 39 z-index: -1; 40 border-radius: 0px 0px 4px 4px; 41 transform: translateY(0%); 42 background-color: #01e056; 43 border: solid 1px #01e0572d; 44 transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1); 45 cursor: pointer; 46} 47 48.download-button:hover .download { 49 transform: translateY(100%); 50} 51 52.download svg polyline, 53.download svg line { 54 animation: docs 1s infinite; 55} 56 57@keyframes docs { 58 0% { 59 transform: translateY(0%); 60 } 61 62 50% { 63 transform: translateY(-15%); 64 } 65 66 100% { 67 transform: translateY(0%); 68 } 69} 70
461 views
Variation of abutton
MIT License