Cara menambah butang dengan jidar kecerunan pada tapak web anda

Question

Masalah saya ialah butang kelihatan sangat kecil dan saya melaraskan ketinggian atau lebar di bawah tanpa sebarang kesan.

Saya telah memasukkan kod ke dalam laman WordPress saya menggunakan Elementor, saya hanya menyeret widget HTML dan menampal kod di bawah.

.container {
  ketinggian: 100vh;
  lebar: 100vw;
  paparan: flex;
  justify-content: pusat;
  align-item: tengah;
  warna latar belakang: putih;
}
.btn {
  padding: 20px 60px;
  sempadan: tiada;
  garis besar: tiada;
  kedudukan: relatif;
  indeks-z: 1;
  jejari sempadan: 5px;
  latar belakang: kecerunan linear(ke kanan, #00FFA3, #DC1FFF);
  kursor: penunjuk;
}
.btn::sebelum {
  kandungan: "";
  jawatan: mutlak;
  kiri: 1px;
  kanan: 1px;
  atas: 1px;
  bawah: 1px;
  jejari sempadan: 4px;
  warna latar belakang: putih;
  indeks-z: -1;
  peralihan: 200ms
}
.btn::selepas {
  kandungan: attr(data);
  saiz fon: 16px;
  latar belakang: kecerunan linear(ke kiri, #00FFA3, #DC1FFF);
  -webkit-background-clip: teks;
  warna: telus;
  peralihan: 200ms
}
.btn:hover::before {
  kelegapan: 50%;
  atas: 0px;
  kanan: 0px;
  bawah: 0px;
  kiri: 0px;
}
.btn:hover::after{
  warna: putih;
}






badan .bekas {
  ketinggian: 10vh;
  lebar: 20vw;
  paparan: flex;
  justify-content: pusat;
  align-item: tengah;
  warna latar belakang: putih;
}

badan .btn {
  padding: 20px 60px;
  sempadan: tiada;
  garis besar: tiada;
  kedudukan: relatif;
  indeks-z: 1;
  jejari sempadan: 5px;
  latar belakang: kecerunan linear(ke kanan, #00FFA3, #DC1FFF);
  kursor: penunjuk;
}

badan .btn::sebelum {
  kandungan: "";
  jawatan: mutlak;
  kiri: 1px;
  kanan: 1px;
  atas: 1px;
  bawah: 1px;
  jejari sempadan: 4px;
  warna latar belakang: putih;
  indeks-z: -1;
  peralihan: 200ms;
}

badan .btn::selepas {
  kandungan: attr(data);
  saiz fon: 16px;
  latar belakang: kecerunan linear(ke kiri, #00FFA3, #DC1FFF);
  -webkit-background-clip: teks;
  warna: telus;
  peralihan: 200ms;
}

badan .btn:hover::before {
  kelegapan: 50%;
  atas: 0px;
  kanan: 0px;
  bawah: 0px;
  kiri: 0px;
}

badan .btn:hover::selepas {
  warna: putih;
}

<div class="container">
  <button class="btn" data="Klik saya"></button>
</div>

Answer 1

Saya membuat butang lebih besar daripada yang asal pada halaman anda (hanya tulis ketinggian dan lebar dalam .btn).

.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>