खोज बॉक्स

842 AmirAliAkrami

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

25 July 2025

3D लॉगिन साइनअप बॉक्स HTML CSS

25 August 2024

यूआई एनीमेशन उत्पादों की खोज

21 July 2025

3D लॉगिन साइनअप बॉक्स HTML CSS डिज़ाइन

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;
}

अनुशंसित

3D लॉगिन साइनअप बॉक्स HTML CSS

यूआई एनीमेशन उत्पादों की खोज

3D लॉगिन साइनअप बॉक्स HTML CSS डिज़ाइन

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS