Casella di ricerca

557 AmirAliAkrami

Apri nell'Editor Pubblica il Tuo Codice Hai bisogno di un sito web?

Consigliato

15 May 2025

Un codice di kouadioarmel055

21 July 2025

Schermo TV HTML con incorporamento di YouTube ed effetti

21 July 2025

Modulo di accesso HTML con sfondo geometrico

HTML

CSS

body{
  margin: 0;
  padding: 0;
  background: #170a34;
}
.box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.input {
  padding: 10px;
  width: 60px;
  height: 60px;
  background: none;
  border: 3px solid #ababff;
  border-radius: 50px;
  box-sizing: border-box;
  font-family: Comic Sans MS;
  font-size: 20px;
  color: #ababff;
  outline: none;
  transition: .8s;
  transition-delay: .2s;
}

.input.click{
  padding: 10px;
  padding-right: 60px;
  width: 300px;
  background: #221b3d;
  border-radius: 10px;
}
.btn{
  position: absolute;
  width: 60px;
  height: 60px;
  top: 0;
  right: 0;
  background: none;
  border: none;
  box-sizing: border-box;
  outline: none;
  cursor: pointer;
  transition: .2s;
}
span{
  position: absolute;
  width: 40px;
  height: 3px;
  top: 65px;
  left: 65px;
  background: #ababff;
  border-radius: 50px;
  transform: translate(-50%,-50%) rotate(45deg);
  transition: .2s;
}
span:nth-child(1).click{
  top: 50%;
  left: 50%;
  background: #cf0202;
}
span:nth-child(2){
  top: 50%;
  left: 50%;
  opacity: 0;
  transition-delay: .2s;
}
span:nth-child(2).click{
  transform: translate(-50%,-50%) rotate(-45deg);
  opacity: 1;
  background: #dc0505;
}

Consigliato

Un codice di kouadioarmel055

Schermo TV HTML con incorporamento di YouTube ed effetti

Modulo di accesso HTML con sfondo geometrico

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS