#e8e8e8
1button { 2 font-family: Arial, Helvetica, sans-serif; 3 font-weight: bold; 4 color: white; 5 background-color: #171717; 6 padding: 1em 2em; 7 border: none; 8 border-radius: .6rem; 9 position: relative; 10 cursor: pointer; 11 overflow: hidden; 12} 13 14button span:not(:nth-child(6)) { 15 position: absolute; 16 left: 50%; 17 top: 50%; 18 transform: translate(-50%, -50%); 19 height: 30px; 20 width: 30px; 21 background-color: #0c66ed; 22 border-radius: 50%; 23 transition: .6s ease; 24} 25 26button span:nth-child(6) { 27 position: relative; 28} 29 30button span:nth-child(1) { 31 transform: translate(-3.3em, -4em); 32} 33 34button span:nth-child(2) { 35 transform: translate(-6em, 1.3em); 36} 37 38button span:nth-child(3) { 39 transform: translate(-.2em, 1.8em); 40} 41 42button span:nth-child(4) { 43 transform: translate(3.5em, 1.4em); 44} 45 46button span:nth-child(5) { 47 transform: translate(3.5em, -3.8em); 48} 49 50button:hover span:not(:nth-child(6)) { 51 transform: translate(-50%, -50%) scale(4); 52 transition: 1.5s ease; 53} 54
Comments
MIT License