Button by simontheonlyone
#e8e8e8
1button { 2 position: relative; 3 width: 10em; 4 height: 4em; 5 border: none; 6 border-radius: 2.1em; 7 background-color: whitesmoke; 8 box-shadow: 0 0 30px rgba(0, 0, 0, .22); 9 cursor: pointer; 10 transition: all 100ms; 11} 12 13button:active { 14 transform: translate(5px, 5px); 15 box-shadow: none; 16} 17 18button::before { 19 content: ''; 20 position: absolute; 21 inset: 43% 13%; 22 width: 5.5em; 23 height: .6em; 24 border: none; 25 border-radius: 3em; 26 background-color: rgb(0, 209, 0); 27 transition: all 300ms ease; 28} 29 30button::after { 31 content: ''; 32 position: absolute; 33 inset: 43% 77%; 34 width: 1.1em; 35 height: .6em; 36 border: none; 37 border-radius: 1em; 38 background-color: rgb(0, 209, 0); 39 transition: all 300ms ease; 40} 41 42button:active::before, 43button:focus::before { 44 width: 1.1em; 45 background-color: red; 46} 47 48button:active::after, 49button:focus::after { 50 width: 5.5em; 51 inset: 43% 33%; 52 background-color: red; 53}
1.3K views
1.3K views
MIT License