#e8e8e8
1.cssbuttons-io-button { 2 background: #A370F0; 3 color: white; 4 font-family: inherit; 5 padding: 0.35em; 6 padding-left: 1.2em; 7 font-size: 17px; 8 font-weight: 500; 9 border-radius: 0.9em; 10 border: none; 11 letter-spacing: 0.05em; 12 display: flex; 13 align-items: center; 14 box-shadow: inset 0 0 1.6em -0.6em #714da6; 15 overflow: hidden; 16 position: relative; 17 height: 2.8em; 18 padding-right: 3.3em; 19} 20 21.cssbuttons-io-button .icon { 22 background: white; 23 margin-left: 1em; 24 position: absolute; 25 display: flex; 26 align-items: center; 27 justify-content: center; 28 height: 2.2em; 29 width: 2.2em; 30 border-radius: 0.7em; 31 box-shadow: 0.1em 0.1em 0.6em 0.2em #7b52b9; 32 right: 0.3em; 33 transition: all 0.3s; 34} 35 36.cssbuttons-io-button:hover .icon { 37 width: calc(100% - 0.6em); 38} 39 40.cssbuttons-io-button .icon svg { 41 width: 1.1em; 42 transition: transform 0.3s; 43 color: #7b52b9; 44} 45 46.cssbuttons-io-button:hover .icon svg { 47 transform: translateX(0.1em); 48} 49 50.cssbuttons-io-button:active .icon { 51 transform: scale(0.95); 52} 53
Comments
Variations
2 MIT License