Categoría: HTML5 y CSS3

Para aquellos momentos en que necesitas resumir toda tu informacion en un corto espacio. Los "tabs" te permiten mostrar mucho contenido sin salir de la página web actual

Fancy toggle button en puro Css3 y HTML5. Nada de librerías externas.

Código en HTML5:

Código del Css3:


.toggle-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 5rem;
  height: 2.5rem;
  font-family: sans-serif;
  font-size: 0.75rem;
  font-weight: 100;
}

.toggle {
  display: none;
}

.foux-toggle {
  position: relative;
  width: 5rem;
  height: 2.5rem;
  border-radius: 2.5rem;
  margin: 0;
  border-width: 1px;
  border-style: solid;
  border-color: #E4E4E4;
  background-color: #F7F7F7;
  -webkit-transition: background-color 0.2s cubic-bezier(0.34, 0.93, 0.85, 0.91);
  transition: background-color 0.2s cubic-bezier(0.34, 0.93, 0.85, 0.91);
}
.foux-toggle:before {
  content: "";
  position: absolute;
  top: 0.25rem;
  left: 0.3125rem;
  display: block;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 1.875rem;
  background-color: white;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  -webkit-transition: left 0.2s cubic-bezier(0.34, 0.93, 0.85, 0.91);
  transition: left 0.2s cubic-bezier(0.34, 0.93, 0.85, 0.91);
}
.toggle:checked ~ .foux-toggle {
  border-color: #7acbee;
  background-color: #8bd8fc;
}
.toggle:checked ~ .foux-toggle:before {
  left: 2.75rem;
}

.toggle--label:before, .toggle--label:after {
  position: absolute;
  top: 0;
  bottom: 0;
  -webkit-transition: opacity 0.4s linear;
  transition: opacity 0.4s linear;
}

.toggle--label {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  line-height: 2.5rem;
  cursor: pointer;
  z-index: 10;
  letter-spacing: 0.0625rem;
}
.toggle--label:before {
  content: 'On';
  right: 40%;
  left: 0;
  color: white;
  opacity: 0;
}
.toggle:checked + .toggle--label:before {
  opacity: 1;
}
.toggle--label:after {
  content: 'Off';
  position: absolute;
  right: 0;
  left: 40%;
  opacity: 1;
}
.toggle:checked + .toggle--label:after {
  opacity: 0;
  -webkit-transition-duration: 0.05s;
          transition-duration: 0.05s;
}

html {
  background-color: #FBFBFB;
}

Utilizamos cookies para aportar una mejor experiencia al usuario en nuestro sitio web. Si sigues navegando, entendemos que aceptas su uso Más información