<doctype html> <html> <head> <style> #contenedor { margin: 40px auto; width: 750px; /* Ancho del contenedor */ box-sizing:
border-box; -moz-box-sizing: border-box; } #contenedor input { height: 32px; visibility: hidden; } #contenedor label { float: left; cursor: pointer; font-size: 15px; /* Tamao del texto de las pestaas */ line-height: 40px; height: 40px; padding: 0 20px; display: block; color: #888; /* Color del texto de las pestaas */ text-align: center; border-radius: 5px 5px 0 0; background: #eee; /* Fondo de las pestaas */ margin-right: 5px; } #contenedor input:hover + label { background: #ddd; /* Fondo de las pestaas al pasar el cursor por encima */ color: #666; /* Color del texto de las pestaas al pasar el cursor por encima */ } #contenedor input:checked + label { background: #FFDA91; /* Fondo de las pestaas al presionar */ color: #444; /* Color de las pestaas al presionar */ z-index: 6; line-height: 45px; height: 45px; position: relative; top: -5px; -webkit-transition: .1s; -moz-transition: .1s; -o-transition: .1s; -ms-transition: .1s; } .content { background: #FFDA91; /* Fondo del contenido */ position: relative; width: 100%; height: 350px; /* Alto del contenido */ padding: 30px; z-index: 5;
border-radius: 0 5px 5px 5px; } .content div { position: absolute; z-index: -100; opacity: 0; transition: all linear 0.1s; } #contenedor [Link]-selector-1:checked ~ .content #contenedor [Link]-selector-2:checked ~ .content #contenedor [Link]-selector-3:checked ~ .content #contenedor [Link]-selector-4:checked ~ .content z-index: 100; opacity: 1; -webkit-transition: all ease-out 0.2s 0.1s; -moz-transition: all ease-out 0.2s 0.1s; -o-transition: all ease-out 0.2s 0.1s; -ms-transition: all ease-out 0.2s 0.1s; } </style> </head> <body> <div id="contenedor"> <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" check ed="checked" /> <label for="tab-1" class="tab-label-1">Inicio</label> <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" /> <label for="tab-2" class="tab-label-2">Contactenos</label> <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" /> <label for="tab-3" class="tab-label-3">Pestaa3</label> <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" /> <label for="tab-4" class="tab-label-4">Pestaa4</label> <div class="content"> <div class="content-1"> Contenido1 </div> <div class="content-2"> Contenido2 </div> <div class="content-3"> Contenido3 </div> <div class="content-4"> Contenido4 </div> </div> </div> </body> .content-1, .content-2, .content-3, .content-4 {
</html>
