<p>Masalah saya ialah butang kelihatan sangat kecil dan saya melaraskan ketinggian atau lebar di bawah tanpa sebarang kesan. </p> <p>Saya telah memasukkan kod ke dalam laman WordPress saya menggunakan Elementor, saya hanya menyeret widget HTML dan menampal kod di bawah. </p> <p> <pre class="brush:css;toolbar:false;">.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; }</pre> <pre class="brush:html;toolbar:false;"><div class="container"> <button class="btn" data="Klik saya"></button> </div></pre> </p>

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