Bouton survolé

2,388 0 Boutons ledoc Suivre

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Recommandé

10 February 2025

Boutons radio

21 June 2024

Bouton d'autodestruction

23 March 2025

Bouton Hover Glow

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

Comments 0

…