How To Create Smooth Css Tabs Without JavaScript

Hi Friends ,Today I am going to show you How to Create Css Tabs Without JavaScript .

To Install in Blogger , You just have to Login in Blogger Dashboard and Go to Themes > Edit Html and Paste Css Code in Just Above </head>.
To Add Content in Tab You just have to Use Label Html .Here , I added only 3 Tabs You can Add More and Don't Forgot change tab1 ,tab2 ...Naming.
To Add Content in Tabs You Just Have to add Content Html with Sequence and They will Arrange according to Tab Labels.

Css Code


  <style>
.tab-wrap{-webkit-transition:0.3s box-shadow ease;transition:0.3s box-shadow ease;border-radius:6px;max-width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;position:relative;list-style:none;background-color:#fff;margin:40px 0;box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24)}.tab-wrap:hover{box-shadow:0 12px 23px rgba(0,0,0,0.23),0 10px 10px rgba(0,0,0,0.19)}.tab{display:none}.tab:checked:nth-of-type(1) ~ .tab__content:nth-of-type(1){opacity:1;-webkit-transition:0.5s opacity ease-in,0.8s -webkit-transform ease;transition:0.5s opacity ease-in,0.8s -webkit-transform ease;transition:0.5s opacity ease-in,0.8s transform ease;transition:0.5s opacity ease-in,0.8s transform ease,0.8s -webkit-transform ease;position:relative;top:0;z-index:100;-webkit-transform:translateY(0px);transform:translateY(0px);text-shadow:0 0 0}.tab:checked:nth-of-type(2) ~ .tab__content:nth-of-type(2){opacity:1;-webkit-transition:0.5s opacity ease-in,0.8s -webkit-transform ease;transition:0.5s opacity ease-in,0.8s -webkit-transform ease;transition:0.5s opacity ease-in,0.8s transform ease;transition:0.5s opacity ease-in,0.8s transform ease,0.8s -webkit-transform ease;position:relative;top:0;z-index:100;-webkit-transform:translateY(0px);transform:translateY(0px);text-shadow:0 0 0}.tab:checked:nth-of-type(3) ~ .tab__content:nth-of-type(3){opacity:1;-webkit-transition:0.5s opacity ease-in,0.8s -webkit-transform ease;transition:0.5s opacity ease-in,0.8s -webkit-transform ease;transition:0.5s opacity ease-in,0.8s transform ease;transition:0.5s opacity ease-in,0.8s transform ease,0.8s -webkit-transform ease;position:relative;top:0;z-index:100;-webkit-transform:translateY(0px);transform:translateY(0px);text-shadow:0 0 0}.tab:checked:nth-of-type(4) ~ .tab__content:nth-of-type(4){opacity:1;-webkit-transition:0.5s opacity ease-in,0.8s -webkit-transform ease;transition:0.5s opacity ease-in,0.8s -webkit-transform ease;transition:0.5s opacity ease-in,0.8s transform ease;transition:0.5s opacity ease-in,0.8s transform ease,0.8s -webkit-transform ease;position:relative;top:0;z-index:100;-webkit-transform:translateY(0px);transform:translateY(0px);text-shadow:0 0 0}.tab:checked:nth-of-type(5) ~ .tab__content:nth-of-type(5){opacity:1;-webkit-transition:0.5s opacity ease-in,0.8s -webkit-transform ease;transition:0.5s opacity ease-in,0.8s -webkit-transform ease;transition:0.5s opacity ease-in,0.8s transform ease;transition:0.5s opacity ease-in,0.8s transform ease,0.8s -webkit-transform ease;position:relative;top:0;z-index:100;-webkit-transform:translateY(0px);transform:translateY(0px);text-shadow:0 0 0}.tab:first-of-type:not(:last-of-type) + label{border-top-right-radius:0;border-bottom-right-radius:0}.tab:not(:first-of-type):not(:last-of-type) + label{border-radius:0}.tab:last-of-type:not(:first-of-type) + label{border-top-left-radius:0;border-bottom-left-radius:0}.tab:checked + label{background-color:#fff;box-shadow:0 -1px 0 #fff inset;cursor:default}.tab:checked + label:hover{box-shadow:0 -1px 0 #fff inset;background-color:#fff}.tab + label{box-shadow:0 -1px 0 #eee inset;border-radius:6px 6px 0 0;cursor:pointer;display:block;text-decoration:none;color:#333;-webkit-box-flex:3;-ms-flex-positive:3;flex-grow:3;text-align:center;background-color:#f2f2f2;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:center;-webkit-transition:0.3s background-color ease,0.3s box-shadow ease;transition:0.3s background-color ease,0.3s box-shadow ease;height:50px;box-sizing:border-box;padding:15px}.tab + label:hover{background-color:#f9f9f9;box-shadow:0 1px 0 #f4f4f4 inset}.tab__content{padding:10px 25px;background-color:transparent;position:absolute;width:100%;z-index:-1;opacity:0;left:0;-webkit-transform:translateY(-3px);transform:translateY(-3px);border-radius:6px}
</style>

Html Code


             <div class="tab-wrap">
            
                <!-- active tab on page load gets checked attribute -->
                <input type="radio" id="tab1" name="tabGroup1" class="tab" checked>
                <label for="tab1">Tab No.1</label>
            
                <input type="radio" id="tab2" name="tabGroup1" class="tab">
                <label for="tab2">Tab No.2</label>
            
                <input type="radio" id="tab3" name="tabGroup1" class="tab">
                <label for="tab3">Tab No.3</label>
            
                    <div class="tab__content">
                       <!--Tab Content-->
                    </div>
            
                    <div class="tab__content">
                       <!--Tab Content-->

                    </div>
            
                    <div class="tab__content">
                      <!--Tab Content-->

                   </div>
         </div>

Css Tabs Without JavaScript

File Type : .txt File File Size :6KB

If it is not automatically downloaded, please click Download again. And if the link is broken, please report it via the Contact page of our blog..