Button by Santosh-DJ
#e8e8e8
1.component-title { 2 width: 100%; 3 position: absolute; 4 z-index: 999; 5 top: 30px; 6 left: 0; 7 padding: 0; 8 margin: 0; 9 font-size: 1rem; 10 font-weight: 700; 11 color: #888; 12 text-align: center; 13} 14 15.tab-container { 16 position: relative; 17 display: flex; 18 flex-direction: column; 19 align-items: flex-start; 20 padding: 2px; 21 border-radius: 9px; 22} 23 24.scroller { 25 content: ""; 26 width: 15px; 27 height: 135px; 28 opacity: 0.4; 29 background: #888; 30 position: absolute; 31 top: 5px; 32 right: -17px; 33 border: 0.5px solid rgba(0, 0, 0, 0.04); 34 border-radius: 7px; 35} 36 37.indicator { 38 content: ""; 39 width: 10px; 40 height: 28px; 41 background: #ffa500; 42 position: absolute; 43 top: 8px; 44 right: -15px; 45 z-index: 9; 46 border: 0.5px solid rgba(0, 0, 0, 0.04); 47 box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.12), 0px 3px 1px rgba(0, 0, 0, 0.04); 48 border-radius: 7px; 49 transition: all 0.2s ease-out; 50} 51 52.tab { 53 width: 130px; 54 height: 28px; 55 position: absolute; 56 z-index: 99; 57 outline: none; 58 opacity: 0; 59} 60 61.tab_label { 62 width: 200px; 63 height: 50px; 64 position: relative; 65 z-index: 999; 66 display: flex; 67 align-items: center; 68 justify-content: center; 69 border: 0; 70 font-size: 1rem; 71 cursor: pointer; 72} 73 74.tab--1:checked ~ .indicator { 75 top: 8px; 76} 77 78.tab--2:checked ~ .indicator { 79 top: calc(28px * 2 + 2px); 80} 81 82.tab--3:checked ~ .indicator { 83 top: calc(26.5px * 4 + 1px); 84} 85
1.1K views
Variation of abutton
MIT License