बटन होवर

1559 ledoc

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

अनुशंसित

30 August 2024

सीएसएस लिक्विड ग्लास बटन होवर प्रभाव

HTML

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  width: 100vw;
  display: grid;
  place-items: center;
  font-family: "Clash Grotesk";
  background-color: black;
}

.hover-text {
  font-size: 32px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 5px;
  font-weight: lighter;
  display: block;
  border-radius: 40px;
  position: relative;
  border: 1px solid #ffffff2d;
  padding: 15px 50px;
  color: white;
  overflow: hidden;
  transition: 0.7s cubic-bezier(0.87, 0, 0.13, 1);
}

.hover-text::before {
  content: "View Careers";
  position: absolute;
  padding: 15px 50px;
  border-radius: 110%;
  white-space: nowrap;
  transition: 0.7s cubic-bezier(0.87, 0, 0.13, 1);
  pointer-events: none;
  top: 0%;
  left: 0px;
  background-color: white;
  color: black;
  transform: perspective(25rem) rotateX(-67deg);
  top: 100%;
  left: 0px;
}

.hover-text span {
  position: relative;
  transition: 0.7s cubic-bezier(0.87, 0, 0.13, 1);
  display: block;
  pointer-events: none;
}

.hover-text:hover::before {
  transform: rotateX(0) translateY(-100%);
  border-radius: 0px;
}
.hover-text:hover > span {
  transform: perspective(25rem) rotateX(67deg) translateY(-140px);
}

बटन होवर

अनुशंसित

निऑन बटन

निऑन होवर बटन

सीएसएस लिक्विड ग्लास बटन होवर प्रभाव

HTML

CSS

JS

अनुशंसित

निऑन बटन

निऑन होवर बटन

सीएसएस लिक्विड ग्लास बटन होवर प्रभाव

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS