Bouton survolé

1140 ledoc

Ouvrir dans l'éditeur Publiez votre code

Recommandé

23 March 2025

Bouton interrupteur de lumière sombre.

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

Bouton survolé

Recommandé

Bouton Hover Glow

Bouton d'animation magique

Bouton interrupteur de lumière sombre.

HTML

CSS

JS

Recommandé

Bouton Hover Glow

Bouton d'animation magique

Bouton interrupteur de lumière sombre.

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS