HTML CSS और जावास्क्रिप्ट होवर एनीमेशन प्रभाव

1287 ledoc

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

HTML CSS और जावास्क्रिप्ट होवर एनीमेशन प्रभाव

अनुशंसित

24 August 2025

सरल HTML पंजीकरण फ़ॉर्म उदाहरण

23 August 2025

लॉगिन पृष्ठ HTML: फ़िंगरप्रिंट प्रमाणीकरण के साथ मैट्रिक्स थीम

19 September 2025

एनिमेटेड CSS ड्रॉपडाउन मेनू के उदाहरण

HTML

CSS

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
body {
  background: #111;
  display:flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.button-wrap{
  margin:10px auto;
  text-align: center;
} 
.hover-button{
  position:relative;
  box-sizing: border-box;
  background:rgba(255,255,255,0);
  border:none;
  font-size: 1.5rem;
  color:turquoise;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  overflow:hidden;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  width:200px;
  height:200px;
} 
.hover-button:before{
  --size:0;
  content:'';
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--size);
  height:var(--size);
  background:radial-gradient(circle closest-side, turquoise, transparent);
  transform:translate(-50%, -50%);
  -webkit-transform:translate(-50%, -50%);
  -moz-transform:translate(-50%, -50%);
  -ms-transform:translate(-50%, -50%);
  -o-transform:translate(-50%, -50%);
  transition:width 0.2s ease, height 0.2s ease;
  -webkit-transition:width 0.2s ease, height 0.2s ease;
  -moz-transition:width 0.2s ease, height 0.2s ease;
  -ms-transition:width 0.2s ease, height 0.2s ease;
  -o-transition:width 0.2s ease, height 0.2s ease;
}
.hover-button:hover:before{
  --size:200px;
}
.hover-button:hover{
  color:#111;
  cursor: none;
}
.hover-button span{
  position:relative;
  font-weight:bold;
}

अनुशंसित

सरल HTML पंजीकरण फ़ॉर्म उदाहरण

लॉगिन पृष्ठ HTML: फ़िंगरप्रिंट प्रमाणीकरण के साथ मैट्रिक्स थीम

एनिमेटेड CSS ड्रॉपडाउन मेनू के उदाहरण

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS