├── README.md ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # radiobuttonneumorp 2 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Radio Button Neumorp 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | 17 | 21 |
22 |
23 | 24 | 28 |
29 |
30 | 31 | 35 |
36 |
37 | 38 | 42 |
43 |
44 | 45 | 46 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | } 4 | 5 | *, 6 | *:before, 7 | *:after { 8 | box-sizing: inherit; 9 | } 10 | 11 | body { 12 | height: 100vh; 13 | display: flex; 14 | align-items: center; 15 | justify-content: center; 16 | background-color: #ecf0f3; 17 | font-family: 'IBM Plex Sans Condensed', sans-serif; 18 | } 19 | 20 | .radiogroup { 21 | padding: 48px 64px; 22 | border-radius: 16px; 23 | background: #ecf0f3; 24 | box-shadow: 25 | 4px 4px 4px 0px #d1d9e6 inset, 26 | -4px -4px 4px 0px #ffffff inset; 27 | } 28 | 29 | 30 | .wrapper { 31 | margin: 8px 0; 32 | } 33 | 34 | .state { 35 | position: absolute; 36 | top: 0; 37 | right: 0; 38 | opacity: 1e-5; 39 | pointer-events: none; 40 | } 41 | 42 | .label { 43 | display: inline-flex; 44 | align-items: center; 45 | cursor: pointer; 46 | color: #394a56; 47 | } 48 | 49 | .text { 50 | margin-left: 16px; 51 | opacity: .6; 52 | transition: opacity .2s linear, transform .2s ease-out; 53 | } 54 | 55 | .indicator { 56 | position: relative; 57 | border-radius: 50%; 58 | height: 30px; 59 | width: 30px; 60 | box-shadow: 61 | -8px -4px 8px 0px #ffffff, 62 | 8px 4px 12px 0px #d1d9e6; 63 | overflow: hidden; 64 | } 65 | 66 | .indicator::before, 67 | .indicator::after { 68 | content: ''; 69 | position: absolute; 70 | top: 10%; 71 | left: 10%; 72 | height: 80%; 73 | width: 80%; 74 | border-radius: 50%; 75 | } 76 | 77 | .indicator::before { 78 | box-shadow: 79 | -4px -2px 4px 0px #d1d9e6, 80 | 4px 2px 8px 0px #fff; 81 | } 82 | 83 | .indicator::after { 84 | background-color: #ecf0f3; 85 | box-shadow: 86 | -4px -2px 4px 0px #fff, 87 | 4px 2px 8px 0px #d1d9e6; 88 | transform: scale3d(1, 1, 1); 89 | transition: opacity .25s ease-in-out, transform .25s ease-in-out; 90 | } 91 | 92 | .state:checked ~ .label .indicator::after { 93 | transform: scale3d(.975, .975, 1) translate3d(0, 10%, 0); 94 | opacity: 0; 95 | } 96 | 97 | .state:focus ~ .label .text { 98 | transform: translate3d(8px, 0, 0); 99 | opacity: 1; 100 | } 101 | 102 | .label:hover .text { 103 | opacity: 1; 104 | } --------------------------------------------------------------------------------