Checkbox by Lucaasbre
#e8e8e8
1.button-menu { 2 cursor: pointer; 3 position: absolute; 4 z-index: 1; 5 background-color: #ffdd00; 6 border: 2px solid #1e1e1e; 7 color: #1e1e1e; 8 font-size: 30px; 9 font-weight: 700; 10 width: 60px; 11 height: 60px; 12 border-radius: 50%; 13 display: flex; 14 justify-content: center; 15 align-items: center; 16 text-align: center; 17 -webkit-box-shadow: 0px 3px 10px 0px rgba(16, 16, 16, 0.5); 18 -moz-box-shadow: 0px 3px 10px 0px rgba(16, 16, 16, 0.5); 19 box-shadow: 0px 3px 10px 0px rgba(16, 16, 16, 0.5); 20} 21 22.checkbox { 23 width: 60px; 24 height: 60px; 25 opacity: 0; 26 z-index: 10; 27 cursor: pointer; 28} 29 30.option { 31 position: absolute; 32 background-color: #1e1e1e; 33 border: 2px solid #ffdd00; 34 color: #ffdd00; 35 z-index: -1; 36 width: 55px; 37 height: 55px; 38 border-radius: 50%; 39 cursor: pointer; 40 font-weight: 700; 41 transition: all 0.3s; 42 -webkit-box-shadow: 3px 3px 10px 0px rgba(16, 16, 16, 0.5); 43 -moz-box-shadow: 3px 3px 10px 0px rgba(16, 16, 16, 0.5); 44 box-shadow: 3px 3px 10px 0px rgba(16, 16, 16, 0.5); 45} 46 47.checkbox:hover ~ .button-menu, 48.checkbox:checked ~ .button-menu { 49 background-color: #eccd00; 50 scale: 0.98; 51 box-shadow: none; 52} 53 54.checkbox:not(:checked) ~ .button-menu::before { 55 content: "+"; 56} 57 58.checkbox:checked ~ .button-menu::after { 59 content: "-"; 60 scale: 0.98; 61 box-shadow: none; 62} 63 64.checkbox:not(:checked) ~ .option { 65 box-shadow: none; 66} 67 68.option:hover, 69.option:active, 70.option:focus { 71 box-shadow: none; 72 scale: 0.98; 73} 74 75.checkbox:checked ~ .option-a { 76 transition-delay: 0.1s; 77 transform: translateY(-70px); 78} 79 80.checkbox:checked ~ .option-b { 81 transition-delay: 0.2s; 82 transform: translateY(-140px); 83} 84 85.checkbox:checked ~ .option-c { 86 transition-delay: 0.3s; 87 transform: translateY(-210px); 88} 89
110 views
110 views
Variations
1 MIT License