黑色按钮

CSS
01/* Hide the default checkbox */02.container input {03  position: absolute;04  opacity: 0;05  cursor: pointer;06  height: 0;07  width: 0;08  display: none;09  color: white;10}11 12.container {13  --size: 50px;14  width: var(--size);15  display: block;16  height: var(--size);17  background-color: #191A1E;18  border-radius: 100%;19  cursor: pointer;20  padding: 5px;21  color: white;22  box-shadow: 1.5px 1.5px 3px #0e0e0e, -1.5px -1.5px 3px rgb(95 94 94 / 25%), inset 0px 0px 0px #0e0e0e, inset 0px -0px 0px #5f5e5e;23}24 25.container .checkmark {26  width: 100%;27  height: 100%;28  border-radius: 50%;29  box-shadow: 1.5px 1.5px 3px #0e0e0e, -1.5px -1.5px 3px rgb(95 94 94 / 25%), inset 0px 0px 0px #0e0e0e, inset 0px -0px 0px #5f5e5e;30  transition: all ease 0.3s;31  padding: 8px;32}33 34.container .checkmark svg {35  opacity: 0;36  transition: all ease 0.3s;37}38 39.container input:checked + .checkmark {40  box-shadow: 0px 0px 0px #0e0e0e, 0px 0px 0px rgb(95 94 94 / 25%), inset 1.5px 1.5px 3px #0e0e0e, inset -1.5px -1.5px 3px #5f5e5e;41}42 43.container input:checked + .checkmark svg {44  opacity: 1;45}