Webleb - Snippets de Código -

Abrir no Editor Publique Seu Código

Recomendado

30 March 2025

Modelo de painel de administração HTML

13 April 2025

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #e8e8e8;
  }
  .l {
    display: block;
    margin-bottom: 1.5em;
    font-size: 1em;
  }
  
  .l {
    background-color: rgba(0,0,0,0.7);
    border-radius: 0.75em;
    box-shadow: 0.125em 0.125em 0 0.125em rgba(0,0,0,0.3) inset;
    color: #fdea7b;
    display: inline-flex;
    align-items: center;
    margin: auto;
    padding: 0.15em;
    width: 3em;
    height: 1.5em;
    transition: background-color 0.1s 0.3s ease-out, box-shadow 0.1s 0.3s ease-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  
  .l:before, .l:after {
    content: "";
    display: block;
  }
  
  .l:before {
    background-color: #d7d7d7;
    border-radius: 50%;
    width: 1.2em;
    height: 1.2em;
    transition: background-color 0.1s 0.3s ease-out, transform 0.3s ease-out;
    z-index: 1;
  }
  
  .l:after {
    background: linear-gradient(transparent 50%, rgba(0,0,0,0.15) 0) 0 50% / 50% 100%,
          repeating-linear-gradient(90deg,#bbb 0,#bbb,#bbb 20%,#999 20%,#999 40%) 0 50% / 50% 100%,
          radial-gradient(circle at 50% 50%,#888 25%, transparent 26%);
    background-repeat: no-repeat;
    border: 0.25em solid transparent;
    border-left: 0.4em solid #d8d8d8;
    border-right: 0 solid transparent;
    transition: border-left-color 0.1s 0.3s ease-out, transform 0.3s ease-out;
    transform: translateX(-22.5%);
    transform-origin: 25% 50%;
    width: 1.2em;
    height: 1em;
    box-sizing: border-box;
  }
  .l:checked {
    background-color: rgba(0,0,0,0.45);
    box-shadow: 0.125em 0.125em 0 0.125em rgba(0,0,0,0.1) inset;
  }
  
  .l:checked:before {
    background-color: currentColor;
    transform: translateX(125%)
  }
  
  .l:checked:after {
    border-left-color: currentColor;
    transform: translateX(-2.5%) rotateY(180deg);
  }
  .l:focus {
    outline: 0;
  }

Recomendado

Um código por ytr3d3

Modelo de painel de administração HTML

Projetar um algoritmo

HTML

CSS

JS

Recomendado

Um código por ytr3d3

Modelo de painel de administração HTML

Projetar um algoritmo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS