बटन होवर

1302 ledoc

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

अनुशंसित

23 November 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