1.1K views
1.cyberpunk-button { 2 background-color: #30cfd0; 3 color: #fff; 4 font-size: 18px; 5 border: none; 6 border-radius: 5px; 7 padding: 15px 25px; 8 cursor: pointer; 9 transition: all 0.3s ease-in-out; 10} 11 12.cyberpunk-checkbox { 13 appearance: none; 14 width: 20px; 15 height: 20px; 16 border: 2px solid #30cfd0; 17 border-radius: 5px; 18 background-color: transparent; 19 display: inline-block; 20 position: relative; 21 margin-right: 10px; 22 cursor: pointer; 23} 24 25.cyberpunk-checkbox:before { 26 content: ""; 27 background-color: #30cfd0; 28 display: block; 29 position: absolute; 30 top: 50%; 31 left: 50%; 32 transform: translate(-50%, -50%) scale(0); 33 width: 10px; 34 height: 10px; 35 border-radius: 3px; 36 transition: all 0.3s ease-in-out; 37} 38 39.cyberpunk-checkbox:checked:before { 40 transform: translate(-50%, -50%) scale(1); 41} 42 43.cyberpunk-checkbox-label { 44 font-size: 18px; 45 color: #fff; 46 cursor: pointer; 47 user-select: none; 48 display: flex; 49 align-items: center; 50}
MIT License