#e8e8e8
1button { 2 font-family: inherit; 3 font-size: 20px; 4 background: #212121; 5 color: white; 6 fill: rgb(155, 153, 153); 7 padding: 0.7em 1em; 8 padding-left: 0.9em; 9 display: flex; 10 align-items: center; 11 border: none; 12 border-radius: 15px; 13 font-weight: 1000; 14} 15 16button span { 17 display: block; 18 margin-left: 0.3em; 19 transition: all 0.3s ease-in-out; 20} 21 22button svg { 23 display: block; 24 transform-origin: center center; 25 transition: transform 0.3s ease-in-out; 26} 27 28button:hover { 29 background: #000; 30 bor 31} 32 33button:hover .svg-wrapper { 34 transform: scale(1.25); 35 transition: .5s linear; 36} 37 38button:hover svg { 39 transform: translateX(1.2em) scale(1.1); 40 fill: #fff; 41} 42 43button:hover span { 44 opacity: 0; 45 transition: .5s linear; 46} 47 48button:active { 49 transform: scale(0.95); 50} 51 52 53 54 55 56
1.2K views
1.2K views
Comments
MIT License