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

1089 ledoc

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

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

अनुशंसित

30 June 2025

ईमेल और पासवर्ड के साथ HTML साइनअप फ़ॉर्म

28 June 2025

साइडबार के साथ HTML एडमिन डैशबोर्ड टेम्पलेट

29 August 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