So fügen Sie Ihrer Website eine Schaltfläche mit Verlaufsrahmen hinzu

Question

Mein Problem ist, dass die Schaltfläche sehr klein erscheint und ich die Höhe oder Breite unten ohne Wirkung anpasse.

Ich habe den Code mit Elementor in meine WordPress-Site eingegeben, ich habe einfach ein HTML-Widget gezogen und den Code unten eingefügt.

.container {
  Höhe: 100 Vh;
  Breite: 100vw;
  Anzeige: Flex;
  rechtfertigen-Inhalt: Mitte;
  align-items: center;
  Hintergrundfarbe: weiß;
}
.btn {
  Polsterung: 20px 60px;
  Grenze: keine;
  Gliederung: keine;
  Position: relativ;
  Z-Index: 1;
  Randradius: 5px;
  Hintergrund: linearer Farbverlauf (nach rechts, #00FFA3, #DC1FFF);
  Cursor: Zeiger;
}
.btn::before {
  Inhalt: "";
  Position: absolut;
  links: 1px;
  rechts: 1px;
  oben: 1px;
  unten: 1px;
  Randradius: 4px;
  Hintergrundfarbe: weiß;
  Z-Index: -1;
  Übergang: 200 ms
}
.btn::after {
  Inhalt: attr(data);
  Schriftgröße: 16px;
  Hintergrund: linearer Farbverlauf (nach links, #00FFA3, #DC1FFF);
  -webkit-Hintergrundclip: Text;
  Farbe: transparent;
  Übergang: 200 ms
}
.btn:hover::before {
  Deckkraft: 50 %;
  oben: 0px;
  rechts: 0px;
  unten: 0px;
  links: 0px;
}
.btn:hover::after{
  Farbe weiß;
}






Körper .container {
  Höhe: 10vh;
  Breite: 20vw;
  Anzeige: Flex;
  rechtfertigen-Inhalt: Mitte;
  align-items: center;
  Hintergrundfarbe: weiß;
}

Körper .btn {
  Polsterung: 20px 60px;
  Grenze: keine;
  Gliederung: keine;
  Position: relativ;
  Z-Index: 1;
  Randradius: 5px;
  Hintergrund: linearer Farbverlauf (nach rechts, #00FFA3, #DC1FFF);
  Cursor: Zeiger;
}

body .btn::before {
  Inhalt: "";
  Position: absolut;
  links: 1px;
  rechts: 1px;
  oben: 1px;
  unten: 1px;
  Randradius: 4px;
  Hintergrundfarbe: weiß;
  Z-Index: -1;
  Übergang: 200ms;
}

body .btn::after {
  Inhalt: attr(data);
  Schriftgröße: 16px;
  Hintergrund: linearer Farbverlauf (nach links, #00FFA3, #DC1FFF);
  -webkit-Hintergrundclip: Text;
  Farbe: transparent;
  Übergang: 200ms;
}

body .btn:hover::before {
  Deckkraft: 50 %;
  oben: 0px;
  rechts: 0px;
  unten: 0px;
  links: 0px;
}

body .btn:hover::after {
  Farbe weiß;
}

<div class="container">
  <button class="btn" data="Klick mich"></button>
</div>

Answer 1

我在你的页面上把按钮做得比原来大一些（只需在.btn上写入height和width）。

.container {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
}

.btn {
  padding: 20px 60px;
  border: none;
  outline: none;
  position: relative;
  z-index: 1;
  border-radius: 5px;
  background: linear-gradient(to right, #00FFA3, #DC1FFF);
  cursor: pointer;
  width: 550px;
  #do width height: 150px;
  # do height
}

So good day;
) .btn::before {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 1px;
  bottom: 1px;
  border-radius: 4px;
  background-color: white;
  z-index: -1;
  transition: 200ms
}

.btn::after {
  content: attr(data);
  font-size: 16px;
  background: linear-gradient(to left, #00FFA3, #DC1FFF);
  -webkit-background-clip: text;
  color: transparent;
  transition: 200ms
}

.btn:hover::before {
  opacity: 50%;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.btn:hover::after {
  color: white;
}

<div class="container">
  <button class="btn" data="点击我"></button>
</div>