Button by ZAKARIAE48CHELLE
#e8e8e8
1.Btn { 2 position: relative; 3 display: flex; 4 align-items: center; 5 justify-content: flex-start; 6 width: 100px; 7 height: 40px; 8 border: none; 9 padding: 0px 20px; 10 background-color: black; 11 color: white; 12 font-weight: 700; 13 cursor: pointer; 14 border-radius: 10px; 15 box-shadow: 5px 5px 0px black; 16 transition-duration: 0.3s; 17} 18 19.svg { 20 width: 13px; 21 position: absolute; 22 right: 0; 23 margin-right: 20px; 24 fill: white; 25 transition-duration: 0.3s; 26} 27 28.Btn:hover { 29 color: transparent; 30} 31 32.Btn:hover svg { 33 right: 43%; 34 margin: 0; 35 padding: 0; 36 border: none; 37 transition-duration: 0.3s; 38} 39 40.Btn:active { 41 transform: translate(3px, 3px); 42 transition-duration: 0.3s; 43 box-shadow: 2px 2px 0px white; 44} 45
198 views
Variation of abutton
MIT License