「日・週・月」のような切り替えに使う連結ボタン。枠線を1px重ねて一体化し、両端だけ:first-child/:last-childで角丸にします。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
各ボタンに margin-left: -1px を掛けて枠線を1本に重ね、:first-child と :last-child で両端だけ角丸にすると一体化して見えます。フォーカスリングは隣のボタンの下に潜り込むため、:focus-visible で position: relative にして最前面へ出すのが小さなコツです。選択状態は aria-pressed で支援技術にも伝えます。
選択の切り替えロジックが必要ならJSでis-activeとaria-pressedを同時に更新します。単一選択ならradio方式（セグメンテッドコントロールのレシピ）も検討してください。
「日・週・月」を切り替える連結ボタングループを作ってください。margin-left: -1pxで枠線を重ね、:first-child/:last-childで両端のみ角丸、選択状態はaria-pressedで表現してください。