Pulsante al passaggio del mouse

1137 ledoc

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

26 October 2024

Modello di sito Web per portfolio di sviluppatori HTML CSS

27 March 2025

Pulsante di accesso

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

Pulsante al passaggio del mouse

Consigliato

Modello di sito Web per portfolio di sviluppatori HTML CSS

Calcolatore BMI

Pulsante di accesso

HTML

CSS

JS

Consigliato

Modello di sito Web per portfolio di sviluppatori HTML CSS

Calcolatore BMI

Pulsante di accesso

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS