Button by vinodjangid07
#212121
1.Download-button { 2 display: flex; 3 align-items: center; 4 font-family: inherit; 5 font-weight: 500; 6 font-size: 17px; 7 padding: 12px 20px; 8 color: white; 9 background: rgb(103, 92, 156); 10 border: none; 11 box-shadow: 0 0.7em 1.5em -0.5em rgba(59, 48, 78, 0.527); 12 letter-spacing: 0.05em; 13 border-radius: 8px; 14 cursor: pointer; 15 position: relative; 16} 17 18.Download-button svg { 19 margin-right: 8px; 20 width: 25px; 21} 22 23.Download-button:hover { 24 box-shadow: 0 0.5em 1.5em -0.5em rgba(88, 71, 116, 0.627); 25} 26 27.Download-button:active { 28 box-shadow: 0 0.3em 1em -0.5em rgba(88, 71, 116, 0.627); 29} 30 31.Download-button::before { 32 content: ""; 33 width: 4px; 34 height: 40%; 35 background-color: white; 36 position: absolute; 37 border-top-right-radius: 5px; 38 border-bottom-right-radius: 5px; 39 left: 0; 40 transition: all 0.2s; 41} 42 43.Download-button::after { 44 content: ""; 45 width: 4px; 46 height: 40%; 47 background-color: white; 48 position: absolute; 49 border-top-left-radius: 5px; 50 border-bottom-left-radius: 5px; 51 right: 0; 52 transition: all 0.2s; 53} 54 55.Download-button:hover::before, 56.Download-button:hover::after { 57 height: 60%; 58} 59
1.7K views
1.7K views
Variations
1 MIT License