Tab Switcher Only HTML and Css - BD WebTeach

Source Code:

<style> .tabs {background:#448AFF; position:relative; padding-bottom:15px;} .tabs > input, .tabs > span {width:25%; height:40px; line-height:40px; position:absolute; top:0;} .tabs > input {cursor:pointer; filter:alpha(opacity=0); opacity:0; position:absolute; z-index:99;} .tabs > span {background:#111111; color:#fff; text-align:center; overflow:hidden;} .tabs > span {-webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s;} .tabs > input:hover + span {background: rgba(255,255,255,.1);} .tabs > input:checked + span, .tabs > input:hover + span {color: #111;} #tab-1, #tab-1 + span {left:0;} #tab-2, #tab-2 + span {left:25%;} #tab-3, #tab-3 + span {left:50%;} #tab-4, #tab-4 + span {left: 75%;} .tab-content {padding: 45px 10px 0; width:100%;min-height: 400px;} .tab-content section {width:100%; display:none;} #tab-1:checked ~ .tab-content #tab-item-1 {display:block;} #tab-2:checked ~ .tab-content #tab-item-2 {display:block;} #tab-3:checked ~ .tab-content #tab-item-3 {display: block;} #tab-4:checked ~ .tab-content #tab-item-4 {display: block;} /* effect-1 */ .effect-1 > input:checked + span {background: #448AFF;} </style> <div class="tabs effect-1"> <!-- tab-title --> <input type="radio" id="tab-1" name="tab-effect-1" checked /> <span>Bangla</span> <input type="radio" id="tab-2" name="tab-effect-1" /> <span>Hindi</span> <input type="radio" id="tab-3" name="tab-effect-1" /> <span>Sports</span> <input type="radio" id="tab-4" name="tab-effect-1" /> <span>Others</span> <!-- end-tab-title --> <!-- tab-content --> <div class="tab-content"> <section id="tab-item-1"> হাই আমি ১ </section> <section id="tab-item-2"> হাই আমি ২ </section> <section id="tab-item-3"> হাই আমি ৩ </section> <section id="tab-item-4"> হাই আমি ৪ </section> </div> <!-- end-tab-content --> </div>

Preview:

Bangla Hindi Sports Others

হাই আমি ১

হাই আমি ২

হাই আমি ৩

হাই আমি ৪